Copyright: ©Xara Ltd. 2001-2002
Citation: Webstyle 2 © Xara Ltd. 2001-2002


Contents

This exists purely to jump to the Contents page.


History

2.03 NavBar troubleshooter added, Geotype page added, Dreamweaver & FrontPage.


Tutorial (topic 900)

Place holder for a jump.


First Screen (topic 901)

Place holder for a jump.


Bevels (topic 103)

Place holder for a jump.


Bevels 3D (topic 110)

Place holder for a jump.


Colors (topic 101)

Place holder for a jump.


Creating your own textures

This is a Release 1 feature and no longer used.


DLL problem

Temporary page for testing.


Delete edit file (205)

Place Holder for a jump.


Delete Project (206)

Place holder to allow for a jump.


Designs (topic 100)

Place holder for a jump.


Dreamweaver integration (topic 400)

Not used in 2.0


Duplicate GIF (topic 203)

Place holder for a jump.


Duplicate NavBar files (topic 207)

Place holder for a jump.


Duplicate file message

Error 201 - believed to be unused.


Duplicate file message

Error 202 - believed to be unused.


Fill Texture

This feature is not implemented in the current release of software.


FrontPage integration (topic 401)

Not used in 2.0


Furniture (107)
Tell me more about...

the button strip (on the left of the window)

Prompts (top of the window)

Preview (center of the window)

Options (lower part of the window)

System Menu (icon in the top left corner of the window)

Click a button to find out more.


Import (topic 115)

Place holder for a jump.


Introduction (topic 100)

Place holder for a jump.


NavBars (topic 102)

Place holder for a jump.


Purchasing (topic 150)

Not used in trial versions.

Place holder for a jump.


Save (topic 113)

Place holder for a jump.


Save Project member (topic 251)

Place holder for a jump.


Shadow (topic 104)

Place holder for a jump.


Size (topic 111)

Place holder for a jump.


Spare page (208)

Error 208 not currently used. Place holder to allow for future use.


Text (topic 105)

Place holder for a jump.


Texture (topic 109)

Place holder for a jump.


Transparency

This feature is not implemented in the current release of software.


Unlocking (topic 151)

Not used in covermount version.


XWS missing (topic 204)

Place holder for a jump.


Projects (topic 112)

Not included in final release.

Place holder for a jump.


Spare page (116)

Error 116 not currently used. Place holder to allow for future use.


Spare page (117)

Error 117 not currently used. Place holder to allow for future use.


Spare page (209)

Error 209 not currently used. Place holder to allow for future use.


Spare page (252)

Help ID 252 not currently used. Place holder to allow for future use.


Spare page (253)

Help ID 253 not currently used. Place holder to allow for future use.


Spare page (304)

Help ID 304 not currently used. Place holder to allow for future use.


Spare page (314)

Help ID 314 not currently used. Place holder to allow for future use.


Spare page (402)

Help ID 402 not currently used. Place holder to allow for future use.


Spare page (403)

Help ID 403 not currently used. Place holder to allow for future use.


Dummy topic - not called from other pages

This topic marks the end of links from Webstyle.hlp. Used only by the help author as a marker.

Help created by Mick Robinson (with suggestions and invaluable information from the rest of the Webstyle team.)


3D bevel options

Extrusion depth

Bevel depth

Bevel type

Corner style

Outlines


3D colors
Coloring 3D Headings

Three colored lights shining onto a colored text surface create the colors of 3D Headings. You can change the color of the text, the colors of all three lights, and the color of the background.

Color of textures

The colors of the lights change any texture you apply to the text. For example a yellow light makes the texture appear more yellow and darker. Textures usually look best with light colors close to white.

Sales plug:

The Xara3D package gives you even more control over the lights and the angle of the text. For more details visit the Xara3D web page [image].


Adding a 3D bevel
Adding a bevel

For 3D headings the bevel is the join between the face and sides of the heading.

To add a bevel:

1.	Select a bevel style (other than None) from the Bevel type drop-down list.

2.	Set Bevel depth to a suitable value.


Adding a bevel

The designer of the template decides which parts of the template can have bevels applied.

To add a bevel:

1.	Set Depth to a suitable non-zero value. This displays the bevel.

2.	Change the other settings to create the bevel effect you want.


Adding graphics to a Project

Projects let you group related graphics together. An example is all the graphics used on a particular web site. Then if you want to change any of the graphics in the future, you can quickly find the Edit file in the Project folder.

All graphics belong to a Project; you select which Project when you save the graphic.

How to add to a Project:

1.	When you save a graphic the Save page has a list of Projects. Initially this list contains a single Project called Default.

To use an existing Project: select from the list.

To create a new Project: click New Project. Then type in the new name.

2.	Click Save to save the graphic and also add the source file to the Project folder.

Related Topic:

What are Projects?


Adding my own textures

You can extend the range of textures in two ways:

importing existing bitmaps

modifying Webstyle backgrounds.


Apply Changes

Projects let you easily update several graphics in one operation. More information on using Projects.

Brief details:

1.	From the list of Projects in the left-hand section of the window, double-click the Project you want to change.

2.	In the left-hand section of the window, click the graphic you want to make the changes to. This becomes the top item in the right-hand list. This is called the "Representative".

3.	In the left-hand section, select the other graphics you want to change.

4.	Edit the Representative as required.

5.	Click Apply changes.

6.	You can then save the graphics incorporating changes made to the Representative. (For example, if you change the background but not the text color, then the background of the other graphics changes. Their text color does not change.)

Options:

Graphic File Name: this lets you overwrite the existing graphic or create a new graphic by changing the name.

Folder: this lets you save the graphic to a different folder.

Save: save the graphic shown in Graphic File Name.

Save All: save this and any remaining graphics in the list.

Don't Save: do not save this graphic.

Cancel: do not save this and any remaining graphics in the list.


Backgrounds & transparent GIFs
Backgrounds and Transparent GIFs

Transparent GIFs don't show the background behind the graphic. So why bother about the background color?

The reason is that few graphics are exactly rectangular. Most have some curved edges. To get the best results, Webstyle has to blend between the color of the edge of the graphic and the background color. (This is called "anti-aliasing" and dramatically improves graphic quality.) So if the background in Webstyle is white, the graphic anti-aliases to white. If the web page background is dark, you may see a noticeable white edge.

The answer is to use a background approximately the same color as your web page background. The color doesn't have to be exact to get good results.

Note: this also applies to transparent PNGs (available as an Advanced Save option.)


Bevel - change extrusion
Changing the extrusion

The extrude depth is the depth of the sides of the text. Its effect is most noticeable where the text is angled to the viewer. It may have no effect if the text is face-on to the viewer.

Bevels are drawn on the sides of the text. This means that narrow text (small extrude depths) might be too small to show a large bevel.


Miter: corners form an angled join.

Round: the joins are smoothed. The difference is particularly noticeable for letters such as M which have sharp corners.


Bevel - topics
Tell me more about...

This page covers what you can do when on the Bevels page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what are bevels?

adding a bevel

removing a bevel

the bevel options

why does this page sometimes has different options?

why is this button sometimes gray?

I don't like the new bevel. How do I return to the previous bevel (if any)?

the Style button

selecting the Bevel page from the keyboard

general information on Webstyle

Click a button to find out more.


Bevel 3D (110)
Tell me more about...

This page covers what you can do when on the Bevels page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what are bevels?

what is extrusion?

what are Outlines?

adding a bevel

removing a bevel

changing the extrusion

the bevel options

why this page sometimes has different options?

why is this button sometimes gray?

I don't like the new bevel. How do I return to the previous bevel (if any)?

the Style button

selecting the Bevel page from the keyboard

general information on Webstyle

Click a button to find out more.


This is the color difference (light & shadow) across the bevel. 0% is minimum contrast (flat color.) Light Source controls the direction of the light that creates the highlight and shadow.


Inner displays the bevel inside the object. The size of the object remains the same.

Outer displays the bevel outside the object and makes it bigger.

Which you use depends on the effect you want to create.


None creates a solid object.

Emboss creates a semitransparent effect. You can see background objects.

Hollow creates opaque bevels and a transparent center. This works well with text.


This changes the position of the light source that creates the highlights and shadows on the bevel. Either click on the wheel or type in a value. Contrast controls the shading difference between highlights and shadows across the bevel.


This is the shape of the bevel. Flat is the most popular bevel type, a sloping edge.


Bevel Style
The Style button

See What is a Style? for general information on Styles.

Using Styles:

1.	On the Designs page (on the Button Strip), right-click on the graphic you want to use for the Style. This pops-up a menu.

2.	On that menu click Create Style.

3.	On the Bevel page click the Style button. This pops-up a menu.

4.	From the menu choose Bevel.

Related topic:

Tutorial on using Styles


This is the depth (size) of the bevel. To change the depth either drag the slider or type in a value.

3D Headings only:

Bevel depth has no effect if the Bevel type is None (no bevel).

Bevels are drawn on the sides of the text. This means that narrow text (low values of extrusion) might be too small to show a large bevel.


You selected a template that doesn't have bevels associated with it. The designer of the template decides where bevels can be used.


The extrusion is the depth of the sides of the 3D headings. It helps to create the illusion of depth to the text.


Bevel options

Bevel depth

Contrast

Profile

Effect

Direction

Light source


There are two different sets of options:

For 3D Headings: you can set the depth of the 3D extrusion, bevel size and type, and create hollow text.

For other types of graphic: you can set the bevel size, depth, contrast. and light angle and elevation


Selecting Outlines (on) creates hollow text. If the text is almost face-on, you may be able to see right through the center of the letters.

You might not see the hollow text for large bevel depths as the bevel can fill the hollow center.


3D Headings only:

This lets you select the bevel design.

None is no bevel (a simple right-angle join between the front and the sides).


3D Headings:

Bevels are the join between the face and sides of the Heading. You can have a simple right-angled join or a more complicated design.

Other types of graphic:

Bevels add an edge to parts of a graphic to give a three-dimensional or embossed look. The template designer decided which parts of the graphic can have bevels applied.


Depending on the graphic type, some options do not apply. For example, you cannot add text to a background. Therefore the Text button is dimmed and clicking it has no effect.


Buying Fonts
There's a wide range of fonts available at budget prices from BuyFonts.com.

Click here to visit our web site [image] for more details.


Changing colors
How do I change a color?

1.	If there's more than one color listed, click on the name of the color you want to change.

2.	Click one of the color patches. If you don't like the result, click another color patch.


Changing the color os a shadow
Changing the color of a shadow

After applying a shadow you can change its color.

1.	Apply a shadow to the graphic.

2.	Go to the Color page (on the Button Strip.)

3.	One of the colors in the list is Shadow color. Click on this to select it.

4.	Change its color. For more information on changing colors click Tell me more... on the Colors page.


Color - style
The Style button

See What is a Style? for general information on Styles.

Using a Style:

1.	On the Designs page (on the Button Strip), right-click on the graphic you want to use for the Style. This pops-up a menu.

2.	On that menu click Create Style.

3.	On the Color page select the name of the color you want to change.

4.	Click the Style button. This pops-up a menu.

5.	From the menu choose the name of the color you want to use. You can use any of the colors in this menu. For example, you could use a color called "Text color" to change the color of the background.

Related topic:

Tutorial on using Styles


Click the Advanced button, select RGB then type in these values.

More details


Color Spectrum List

There are several ways of displaying the 216 colors in Webstyle's palette. This list lets you select the display you prefer. The colors do not change; only the order in which they are shown.


Colors - Advanced options
The advanced color options

This lets you create your own custom colors. Click the Advanced button to show these options.

You can create colors by either:

dragging the pointers on the colored panel and the color strip

or, for defining exact color mixes, typing in values.


The 216 colors shown exactly match the color palette used in Netscape Navigator and Microsoft Internet Explorer. These colors give the best results when viewed in 256 color screen modes; other colors are "dithered" and don't look as good.

Displayed separately are black, white, and a range of grays.


Click the Advanced button. This displays a more complex Color Picker that lets you create your own custom colors.


Colors - custom color
Creating a custom color using the text boxes:

You can define colors using either HSV (Hue-Saturation-Value) or RGB (Red-Green-Blue) values. Both let you create the same range of colors. Use the one you are familiar with.

You may see colors defined as a set of six digits (EEAD00 for example) - you can create these colors using RGB.


Colors - define in HSV
Defining colors in HSV

Hue is the angle around a color circle, 0-360º. 0º (& 360º) is Red, 120º Green, 240º Blue.

Saturation is the amount of color pigment. 100% is saturated color; 0% is white.

Value is the brightness. 100% is pure color; 0% is black.


Colors - define in RGB
Defining colors in RGB

You can define RGB values as 0-255, 0-100% or as hex digits (00-FF). Use the range you are familiar with.

You sometimes see colors defined as six digits (EEAD00). To define this color, select Hex then type the value. You can use characters 0-9, A-F (or a-f).


The list shows the basic colors used in the graphic. The other colors in the graphic are shades and tints of these basic colors. A few graphics have some colors you cannot change - these are used only in small areas such as highlights and shading.


Colors - topics
Tell me more about...

This page covers what you can do when on the Color page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

how do I change a color?

the colors shown in the list

what's special about the colors in the small squares?

the Color Spectrum list

my color chart shows a color as EEAD00 - how can I create this?

how do I create my own colors?

the Advanced color options

3D Headings and colors

recoloring shadows

recoloring backgrounds

colors and NavBars

I want to create a transparent GIF - what use are backgrounds?

textures and colors

I don't like the new color. How do I return to the previous color?

the Style button

the Revert button

selecting the Color page from the keyboard

general information on Webstyle

Click a button to find out more.


Common questions
Some common questions...

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

which folder are my files saved in?

can I select options using the keyboard?

why are some buttons dimmed?

can Webstyle publish my graphics on the Internet?

why is there a noticeable edge around my saved graphic?

I want to create a transparent GIF - what use are backgrounds?

how do I Install the fonts supplied with Webstyle?

how do I create a series of buttons all the same size?

why do some folders marked (Project)?

giving my files to another Webstyle user.

what other Xara products are there?


Contents
Welcome to Xara Webstyle

Normally this help is opened by clicking Tell me more.. on the Webstyle window for help on the current page. This page lets you view any of the sets of topics.

List of Topic pages:

Introduction

What's New in Version 3?

License terms

Import

Designs

Text

Color

Texture

Bevel

Bevel 3D

Shadow

Size

NavBars

Save

Other Xara products

Registering this copy of WebStyle

Upgrading to Webstyle 3

Release 2.0cm October 2002

Copyright ©2001-2002 Xara Ltd.

Xara Ltd.

Gaddesden Place

Hemel Hempstead

HP2 6EX

United Kingdom

www.xara.com

Xara is a registered trademark of Xara Ltd. Windows, Windows NT and FrontPage are either trademarks or registered trademarks of Microsoft Corporation. TrueType is a registered trademark of Apple Computer, Inc. ATM, Adobe Type Manager and PostScript are registered trademarks of Adobe Systems Inc. Java is a registered trademark of Sun Microsystems Inc. JavaScript is a trademark of Sun Microsystems Inc. Dreamweaver, is a registered trademark of Macromedia Inc.

All other trademarks or registered trademarks are the property of their respective owners.

Haxton Logos, Geotype, Greek Diner, Russel Write, and Whimsy fonts are provided by kind permission of Gary Bouton and remain © Gary Bouton, see theboutons.com [image]. Other fonts are provided by third parties who retain the copyright. In all cases copyright is reserved by Xara or its licensors and is protected by international copyright law.

All images are subject to the usage conditions.


Copying graphics between Projects

You may wish to include a graphic in two different Projects. Or you might want to copy a graphic to a different Project. You can do this in two different ways.

Using Webstyle:

This is easiest for copying a small number of graphics.

1.	Resave the file and select a different Project to save to. More details.

Using Windows:

This is easiest for copying several graphics.

1.	Browse to the folder where you installed Webstyle.

2.	In that folder is WSTemplates - open that folder.

3.	Open the Project folder you want to copy from and the folder you want to copy to.

4.	Each graphic has two files: an XGT and an XWS file. Copy both files to the other Project folder in the regular way for copying files.

Related Topics:

What are Projects?

Adding graphics to a project

Updating Project graphics


Copying using the Clipboard
Copying graphics using the clipboard

Right-clicking on the Preview Window pops-up a menu. This lets you copy Webstyle graphics to other programs using the clipboard. The sequence is:

1.	In Webstyle, copy the bitmap or filename to the clipboard using the pop-up menu.

2.	In the other program paste the bitmap/file. Usually you just right-click on the window for the other program and choose Paste.

Check the documentation for the other program if you have problems. (Not all programs support paste from the clipboard - this is beyond the control of Webstyle.)

The difference between Copy Bitmap & Copy Filename:

Copy filename:

This uses the current Save settings and so you have full control over the copied graphic. (For example whether the file is a GIF or JPEG.) If you have changed the Advanced settings check that the current settings are suitable for this graphic.

Copying to the clipboard creates a temporary file on disk. (This file gets deleted when you quit Webstyle.) Most programs create their own permanent copy of this file.

You can paste the Webstyle file into an Open, Import, Insert graphic (or similarly named) dialog box for the other program.

You can also copy files by dragging from the preview window onto the window for the other program. (This is called "drag-and-drop".)

Note: you can use this method to copy graphics to the desktop.

Note on FrontPage: unusually you can paste files directly into an HTML page in FrontPage. We recommend saving the FrontPage file after pasting the graphic - this stores the temporary file in FrontPage's graphics repository.

Copy bitmap:

For the inexperienced user this is easier than copying the file but you have less control. For example, you cannot specify a file format. Also you cannot create a transparent background as you can with GIF format files.

You can paste the bitmap directly into programs that support clipboard copying.

Technical note: the bitmap is copied as a 24-bit Device Independent Bitmap (DIB).


Create custom colors
Creating a custom color by dragging:

1.	Select the name of the color you want to change.

2.	Select the basic color from the colored strip. This represents the edge of a color circle that has red at both ends.

3. 	Select the shade from the main color panel.

Note:

You can drag the pointers or click on the colored strip and color panel.


Creating a NavBar

You have two options for creating a NavBar:

Use one of the NavBar templates - these often have decorative end caps. Most NavBar templates have different designs for each of the NavBar states.

Use another type of template (such as individual buttons) - these do not have end caps. Depending on the template design, Buttons may have different designs for each NavBar state or just Mouse Off & Mouse Over states. Other templates have just the Mouse Off state.

The process of creating a NavBar is similar for both options.

To create a NavBar:

1.	From the Designs page (on the Button Strip) select the template you want to use.

2.	If required, make any changes (such as color changes) in the regular way. (See the Note on Text.)

3.	Go to the NavBars page (on the Button Strip).

4.	If necessary select Create NavBar.

5.	If required, add extra buttons or remove unwanted buttons.

6.	If required add URLs (web addresses) to your buttons - more details.

7.	You are creating the default, Mouse Off button state. If required, create one or more of the other button states. (See Button state options for extra information.)

8.	Go to the Save page (on the Button Strip) and preview/save the NavBar.

9.	If necessary, copy the HTML to your web page - more details.

Tip: Bars can take some time to create. To quit creation for any reason press ESC.

Note:

Text: each line of text is a separate button. NavBar buttons cannot have multiple lines of text.

Related topics:

NavBars


Creating a NavBar button
Creating a new NavBar button

This page describes adding a new button to a NavBar. See this page for details of how to create a NavBar.

To create a button:

1.	In the Buttons list, click (New Button text here).

2.	Type in the text you want the button to show. (Each button can show only a single line of text.)

3.	If you want to change the order of the buttons, drag the colored strip (showing the text) up the list of buttons.

Related topics:

NavBars


Creating a Floor Shadow

1.	Click on Floor to select it (if not selected.)

2.	Move the Y Size slider to change the angle of the surface. The smaller the shadow, the greater the apparent angle between the object and the surface.

3.	Move the Tilt Angle slider to move the light source left or right.

4.	Move the Darkness slider to make the shadow lighter (weaker) or darker (stronger.) This changes the strength of the light source.

5.	Move the Blur slider to change the size of the light source. A pin-point source gives little blurring at the edges of the shadow. A larger source (such as the sun) gives more blurring. We recommend always blurring the edges slightly - this is more realistic than a sharp edge.

Note:

You can also type in values. This is useful if you want to create several graphics with common shadows. (To create common shadows, you can also use Styles.)


Creating a new Project

Projects let you group related graphics together. An example is all the graphics used on a particular web site. Then if you want to change any of the graphics in the future, you can quickly find it in the Project folder.

All graphics belong to a Project; you select which Project when you save the graphic.

To create a new Project:

1.	When you save a graphic the Save page shows a list of Projects. Initially this list contains a single Project called Default.

To create a new Project, click New Project. Then type in the new name.

2.	Click OK to create the Project folder.

3.	Click Save to save the graphic and also add the Edit file to the Project folder.

Related Topic:

What are Projects?


Creating a Wall Shadow

1.	Click on Wall to select it (if not selected.)

2.	Move the sliders to change the position and distance of the light source. The Y offset moves the light source up and down. The X offset moves the light source left or right.

3.	Move the Darkness slider to make the shadow lighter (weaker) or darker (stronger.) This changes the strength of the light source.

4.	Move the Blur slider to set the size of the light source. A pin-point light source gives little blurring at the edges of the shadow. A larger source (such as the sun) gives more blurring. We recommend always blurring the edges slightly - this is more realistic than a sharp edge.

Note:

You can also type in values. This is useful if you want to create several graphics with common shadows. (To create common shadows, you can also use Styles.)


Creating same size buttons
Creating a series of same-size buttons

On web pages you often want a column (or row) of same design buttons, all the same size. Many of Webstyle's button designs stretch as you type in more text. (We call these "stretchy buttons".) You can use these designs to create a series of same size buttons.

To create same size buttons

1.	From Buttons select a suitable design. Generally those buttons where the text is inside the button or where there is a line above or below the text are "stretchy". (Some Headings are also "stretchy" - the process is the same.)

2.	Type in the maximum amount of text you may want. This gives the maximum width for the buttons.

3.	Go to the Size page (on the Button Strip.)

4.	If required, scale the button until it is the size you want.

5.	Select Longest text controls all button width - this stops the button resizing as you change the text in it. This check box is dimmed if the button design isn't "stretchy".

6.	You can save this button as a template for future use.

7.	Create the other buttons by changing the text and saving the button. If you type in more text than in step (2), the text may be wider than the button.

Note:

You can also create button bars using the NavBars page. See Creating bars.


Creating textures from backgrounds
Modifying backgrounds to create textures

Webstyle includes a set of background templates. You can modify these to create new textures.

To modify a background:

1.	Click Start (on the Button Strip) - this displays the different types of template.

2.	Click Backgrounds. This displays the range of Webstyle background templates.

3.	Select the background you want to use.

4.	Modify it (for example by changing the colors.)

5.	Save the modified graphic. (Click Save on the Button Strip.) This creates a new texture bitmap.


Delete edit file

Webstyle uses three types of file:

The original Template file.

A GIF, JPEG or PNG file for use on your website. You create this file when you Save the graphic.

An Edit file listing the changes you have made to the Template. Saving the graphic automatically creates an Edit file in the current Project folder.

You are trying to delete an Edit file. If you do this, you cannot make further edits to the graphic. You would have to reload the original template graphic and reapply the edits to that.

Clicking Delete means you cannot edit this graphic in the future.


Delete Project

Webstyle uses three types of file:

The original Template file.

A GIF, JPEG or PNG file for use on your website. You create this file when you Save the graphic.

An Edit file listing the changes you have made to the Template. Saving the graphic automatically creates an Edit file in the current Project folder.

You are trying to delete a Project folder. If you do this, you cannot make further edits to the graphics in the Project. You would have to recreate them from the original template graphics.

Clicking Delete means you cannot edit these graphics in the future.


Deleting a NavBar button

Creating a NavBar creates a default set of four buttons. You can also create your own buttons. This page describes deleting unwanted buttons.

To delete a button:

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click on the button name you want to delete. This highlights it.

3.	Press the Delete (or Backspace) key on the keyboard.

Note that NavBars must contain at least one button - you cannot delete all the buttons.

Alternatively:

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click on the button name you want to delete. This highlights it.

3.	Delete the text for the button.

4.	Click on another button name - this deletes the unwanted button.

If you want to change the button text and not delete the button, click on the button name to highlight it. Then change the wording by typing in the button text field.

If you want a blank button (one showing no text), type a Space into the button text field.

Related topics:

NavBars


Deleting a Project

Projects let you group related graphics together. An example is all the graphics used on a particular web site. Then if you want to change any of the graphics in the future, you can quickly find its Edit file in the Project folder.

All graphics belong to a Project; you select which Project when you save the graphic.

If you no longer want the Edit files, you can delete the Project folder. Caution: if you delete the Project folder, you cannot edit the graphics in the future.

To rename a Project:

1.	Click  Start on the Button Strip.

2.	Click Load on the Button Strip - this displays all your Projects.

3.	Right-click on the Project you want to rename. This opens a menu.

4.	Click Delete folder.

Related Topic:

What are Projects?


Designs - topics
Tell me more about...

This page covers what you can do when on the Designs page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

using the Designs page

reloading previous work

how to use Webstyle

the Webstyle window

some common questions

selecting this page from the keyboard

general information on Webstyle

Click a button to find out more.

Click here to visit the Webstyle web site


Designs page
The Designs page

The Designs page lets you select from Webstyle's collection of templates. You can view templates in two ways:

Theme Sets - you see a sample graphic from each Theme Set. Clicking the sample displays all the graphics in that set. Theme Sets also includes Project folders where you save the source files for graphics you create - more on Projects.

All templates - you can define the selection criteria from the options on the left (such as graphic type or complexity). The right-hand window then shows graphics that match the criteria. Page (at the top of this window) shows how many pages of graphics and which page you are viewing. Use the arrows to move between pages.

Click Display Theme Set/Search Mode to swap between the two types of display.

If you want to reload graphics you have created, you may find it easier to use the Import page. To display this click Start then click Import. You then see your saved graphics.


Duplicate file

Webstyle cannot save this file because a file with the same name already exists.

Your options:

Overwrite the existing file. This destroys the existing file contents.

Let Webstyle allocate a filename by adding a number to the end. (So Name gets saved as Name1.)

Don't overwrite the existing file (Cancel). You need to type in a different name.


Duplicate NavBar files

One or more of the files you selected already exists. (Existing files are shown in red in the HTML list.)

HTML (web page) files:

If the NavBar already exists in the file, saving to it has no effect.

If the NavBar is new, add it to the start of the page.

Other files:

Overwrite the existing file contents with the new graphic or JavaScript.


Example of jumping to another page


This is called a "pop-up". It displays a small amount of extra information.

Clicking anywhere on the window closes a pop-up.


Clicking the Explore button displays Theme sets and other categories of graphics. This provides a quick way of browsing all Webstyle's graphics.


File size options

There is a tradeoff between file size and image quality. Often a reduction in quality isn't noticeable but makes the file much smaller. The smaller the file, the quicker it downloads over the Internet. If you want to attract people to your web site, you don't want them waiting for graphics to download slowly. File Size (at the bottom of the window) tells you how large the file will be.

Animated banners:

You have control over the number of colors in the graphic. Reducing the number of colors reduces the file size. Choose the smallest number of colors that gives acceptable results.

Other types of graphic:

The Preview shows you how the graphic looks with the selected options. Typically High Quality files are twice the size of Fast Download.

Related topics:

Saving a graphic

Bitmap formats

Advanced saving options


Installing Webstyle automatically installs the fonts supplied as part of the Webstyle package. Most programs show these fonts in their font list immediately. You may find a few programs that you have to close and then reload before they show the new fonts.

These fonts are from the large collection of fonts available for individual download at www.buyfonts.com

Geotype font kindly provided by Gary David Bouton; other fonts are copyright FontBank Inc. These are commercial fonts and you may not distribute them to third parties without permission.


Foreground & background textures
Foreground and background textures

You can use textures in two ways:

Background textures are used behind the graphic. Usually you would use the same (or similar) texture as the background to your web page.

Other textures (foreground textures) are used on the graphic itself. Which parts of the graphic can have textures is decided by the designer of the template. You have more controls for foreground textures.


Furniture - button strip
Button strip

(On the left of the window.)

This is the main way of editing the graphic shown in the Preview area. Clicking a button shows the range of available options.


Geotype font
The Geotype font

Geotype is a symbols font supplied with Webstyle. To enter characters in this font, select Geotype from the font list then type the character shown in red. For example, to enter 6 type 6.

Geotype is provided by kind permission of Gary Bouton and remains © Gary Bouton


Graphic Type - 3D
3D Headings

These look as though the text has been extruded backwards to give the impression of depth. Webstyle uses a simplified version of Xara's acclaimed Xara3D graphics package.

Three colored lights shining on the text give the variations in coloring. Using the simple color editor you can change the light shining on the face of the text. Using the Advanced color options you can change all three lights and the color of the text. For more information click the Color button and then click Tell me more.

You can also use a bitmap texture to alter the appearance of the text.

Visit the Xara3D web page [image] for more details of the full Xara3D package.


Graphic Type - NavBars
NavBars

Webstyle includes sets of NavBar templates. A set might include several button designs and graphics for the end of the NavBar. You can also create NavBars from buttons or 3D Headings.


Projects

When you create a graphic, the source file gets automatically added to the current Project folder. This makes it easy to reload recent work for further editing. By saving related files (for example all the graphic for a particular web site) in separate Project folders you can easily find the source files in the future.


Graphic Type - background
Backgrounds

These are suitable for use as backgrounds on your web pages. Some are photographs of real life objects such as a brick wall or leaves, carefully converted so you can change the basic colors used.


Graphic Type - banners
Banner Ads

Banner adverts on web pages are usually a standard size of 468x60 pixels or 125x125 pixels. Webstyle includes a selection of example banners, which you can modify to your own requirements.


Graphic Type - bullets
Bullets

These are useful for highlighting items in bullet lists or as navigation buttons. Generally bullets are quite small. (Although you can use Webstyle to scale them to any size.) The difference between bullets and buttons is that buttons have text associated with them.


Graphic Type - buttons
Buttons

There are several types of button available. There are arrow buttons that you can use to help readers navigate up and down and from page to page. There are buttons you can add your own text messages to. These automatically scale to fit the text you type in.

The difference between bullets and buttons is that buttons have text associated with them.


Graphic Type - dividers
Dividers

These are suitable for dividing your page horizontally. They are more eye-catching than a plain line across your web page.


Graphic Type - headings
Headings

These are intended as page or section headings.


Graphic Type - logos
Logos

A collection of designs suitable for creating a corporate logo.


Graphic Type - theme sets
Theme Sets

These are sets of different graphics with a common design theme. For example a set might contain a heading, divider, bullet, buttons, all in the same style.


Graphic types

Tell me more about...

Backgrounds

Banner Ads

Bullets

Buttons

Dividers

Headings

3D Headings

Logos

NavBars

Theme Sets


Import - topics
Tell me more about...

This page covers what you can do when on the Import page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

using the Import page

the Load button

how to use Webstyle

the Webstyle window

some common questions

selecting this page from the keyboard

general information on Webstyle

Click a button to find out more.

Click here to visit the Webstyle web site


Clicking the Import button displays graphics in the last folder you saved to. This lets you quickly reload recent work. (You can also browse to other folders.)

You see all GIF, JPEG and PNG files but you can only edit graphics created using Webstyle.


Import page
The Import page

The Import page lets you reload graphics that you have created. You can then make further changes to the graphic. The Import page shows the GIF, JPEG or PNG file - Webstyle uses the name of the file to search for the Webstyle Edit file. If you have renamed the GIF, JPEG or PNG file, Webstyle might not be able to find the Edit file.

Initially you see the contents of the Export folder (the default folder for saving graphics). When you first run Webstyle, the Export folder is empty (as you haven't yet saved any graphics). As you save graphics they appear in the list.

 You can always return to viewing the Export folder by clicking the Home button on this window.

Click the Up button to browse to other folders. Webstyle remembers the last folder you viewed and redisplays its contents when you return to this page.

You cannot use the Import page to select from Webstyle's range of templates (because you see only previously saved graphics).

To select a template:

1.	Click Start.

2.	Select the type of template (Headings, Buttons and so on) you want to select from.

3.	Select the template you want to edit.


Importing bitmap textures

To extend the range of textures you can import GIF, PNG, or JPEG bitmaps. Background textures need to tile (multiple copies join together seamlessly.) Other textures do not need to tile.

To add textures:

1.	The easiest way is to drag-and-drop the new GIF, PNG, or JPEG file onto the Textures window. A small "+" appears by the mouse pointer when correctly positioned. Adding textures like this makes them immediately available.

Alternatively copy the new textures into the Background folder (in WSTemplates folder.) Both these folders are in the folder where you installed Webstyle. This is the easiest method if you want to add a lot of textures.


Introduction - topics
Introduction

Tell me more about...

registering this copy of Webstyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what other Xara products are there?

how to use Webstyle

the different types of graphic

the Webstyle window

the Load button

the Import button

the Explore button

some common questions

selecting template graphics

reloading previous work

installing the Webstyle fonts

the right-click menu

the System Menu

copying using the clipboard

uninstalling Webstyle

how to contact Technical Support

Webstyle license terms

how to find my way around these pages. (Hint: click the [image] button.)

run the Tutorials

Click a button to find out more.

Visit the Webstyle web site [image] for the latest information.

Click here for Webstyle support [image] for help updates and latest tips

Xara's home page


Keyboard short cuts

F1	open this help file

The following are alternatives to pressing buttons on the Button Strip:

F2	select Start

F3	select Designs or Load

F4	select Text or Import

F5	select Color

F6	select Texture

F7	select Bevel

F8	select Shadow

F9	select Size

F10	select NavBars

F11	(unused)

F12	select Save

To select one of the graphic types:

A	Banner Ads

B	Buttons

D	Dividers

G	Backgrounds

H	Headings

L	Bullets

N	NavBars

O	Logos

T	Theme Sets

3	3D Headings

CTRL+Z	discard changes (alternative to clicking Revert)


License terms
Webstyle license terms

© 1991 - 2002 XARA LTD.

IMPORTANCE NOTICE: The Webstyle software and template graphics ("Software") is the copyright of Xara Limited ("Xara") whose principal place of business is at Gaddesden Place, Hemel Hempstead, HP2 6EX, United Kingdom and may not be stored on any computer or copied without the license of Xara.  You are offered a license on the terms of the End User License Agreement ("EULA") set out below.

If you accept the terms of the License Agreement, select  "I ACCEPT".

Selecting I ACCEPT and installing the Software constitutes acceptance of the terms of the EULA. Please read carefully and accept the terms and conditions of the EULA before installing the Software.  Do not install  the Software if you do not agree to the terms and conditions of the EULA.

If you do not accept these terms and you have purchased the Software you may within 14 days of purchase return the CD-ROM containing the Software, unused and intact or in the case of a download a Letter of Destruction to your supplier together with proof of purchase for a full refund.

WEBSTYLE END USER LICENSE AGREEMENT ("EULA")

You are permitted to:

1.	load or download the Software and use it only on a single client computer which is under your personal control;

2.	transfer the Software from one computer to another provided it is used on only one computer at any one time;

3.	make one copy of the Software for back-up purposes only in support of the permitted use.  The copies must reproduce and include Xara’s copyright notices;

4.	transfer the Software (complete with all its associated documentation) and this license to another person provided he has agreed to accept the terms of this Agreement and you contemporaneously transfer all copies of the Software you have made to that person or destroy all copies not transferred.  If any transferee does not accept such terms then this license shall automatically terminate.  The transferor does not retain any rights under this Agreement in respect of the transferred Software or license.

You are not permitted:

a.	to use the Software on any computer or system which permits electronic access to it by more than one user;

b.	to rent, lease, sub-license, loan, copy (except as expressly provided in this Agreement), modify adapt, merge, translate, reverse engineer, decompile, disassemble or create derivative works based on the whole or any part of the Software or its associated documentation except as permitted by law;

c.	except as expressly provided in this Agreement, to use, reproduce or deal in the Software in any way.

TERM

The license is effective until you terminate it by destroying the Software and its documentation together with all copies.  It will also terminate if you fail to abide by this Agreement.  Upon termination you agree to destroy all copies of the Software and its documentation including any Software stored on the hard disk of any computer under your control. If you are using the trial version of the Software then any rights to use the Software or images created with it terminates with the expiration of the trial period.

OWNERSHIP

You own only any CD-ROM (or authorized replacement) upon which the Software was supplied where it was not downloaded.  You may retain such CD-ROM on termination provided the Software has been erased. Xara shall at all times retain ownership of the Software as recorded on the original  CD-ROM and all subsequent copies thereof regardless of form.  This Agreement applies to the grant of the license only and not to the contract of sale of the CD-ROM.

RESTRICTIONS

This license gives you the right to use images created with this Software with the following limitations:

1.	The original, unaltered template graphics and the bundled fonts cannot be redistributed, sold or published in any form, commercial or otherwise.

2.	In the case where JavaScript and/or HTML is created as part of a NavBar you cannot remove any copyright information from within the script, nor can you separate the script from the graphic elements.

3.	Graphics created from the templates cannot be redistributed, sold or published in any form, commercial or otherwise, as a collection or part of a collection of images, specifically but not exclusively they cannot be included in template, clip-art, font, background texture or photo collections whether on web sites or distributed on electronic media such as CDs or disks, nor can they be included as part of another product.

4.	Some fonts are provided by third parties who retain the copyright. In all cases copyright is reserved by Xara or its licensors and is protected by international copyright law.  All images are subject to the usage conditions.

5.	You may not use the images for any purpose which is prohibited by law.

WARRANTIES AND REMEDIES

1	Xara warrants that the storage media on which the Software may have been supplied will be free from defects in materials and workmanship under normal use for a period of  90 days after the date of original purchase. If a defect in any CD occurs during such period you may return it with proof of purchase to your supplier who will replace it free of charge.

2	Xara warrants that the Software will perform substantially in accordance with its accompanying documentation (provided that the Software is properly used on the computer and with the operating system for which it was designed) and that the documentation correctly describes the operation of the Software in all material respects. If Xara is notified of any significant error in the Software during the period of 90 days after the date of original purchase it will correct any such error within a reasonable time (by replacement if it chooses) or, at its option, refund the price of the Software (against return of the Software and its documentation).

3	The warranties set out in paragraphs 1 and 2 above are your sole warranties and are in place of all warranties conditions or other terms expressed or implied by statute or otherwise, all of which are hereby excluded to the fullest extent permitted by law. Paragraphs 1 and 2 also set out your sole remedies for any breach of  Xara’s warranties

4	In particular Xara does not warrant that the Software will meet your requirements or that the operation of the Software will be uninterrupted or error free or that all errors in the Software can be corrected. You load and use the Software at your own risk and in no event will Xara be liable to you for any loss or damage of any kind (except personal injury or death resulting from Xara’s negligence) including lost profits or  any indirect or consequential loss arising from the use of or inability to use the Software or from errors or deficiencies in it whether caused by negligence or otherwise, except as expressly provided in this Agreement.

CONSUMERS

Nothing in this Agreement shall affect your statutory rights as a consumer .

LAW

This Agreement shall be governed by English law.

If you have any questions concerning this Agreement please write to Xara Limited, Gaddesden Place, Hemel Hempstead, HP2 6EX, United Kingdom.

Haxton Logos, Geotype, Greek Diner, Russel Write, and Whimsy fonts are provided by kind permission of Gary Bouton and remain © Gary Bouton, see theboutons.com [image]. Other fonts are provided by third parties who retain the copyright. In all cases copyright is reserved by Xara or its licensors and is protected by international copyright law.


Clicking the Load button displays the Project folders. A Project is a collection of the Edit files for related graphics (for example all the graphics for a particular web site). When you save a graphic you specify which Project you want it to belong to.


Making headings the same height

You sometimes want to create a series of headings all the same relative height. But the height of the text changes if it contains ascenders (capitals and letters such as b, h) or descenders (j, p). Thus, the text in Help and in one are different heights. When saved from Webstyle, one may appear bigger than Help.

To fix the height:

1.	Create the first heading. In the future you can use this as a template for the other headings.

When you want to create more headings based on this template:

2.	Reload the first heading.

3.	Go to the Text page (on the Button Strip.)

4.	Delete the existing text.

5.	Type in the new text.

6.	Save the new heading using a different name.


NavBar States
NavBars can have multistate (rollover) buttons. There are three possible states:

Mouse Over - highlights an unselected button when the mouse is over it.

Selected (pressed in) - shows that the button is selected.

Mouse Off (pressed out) - when neither of the other states apply.

The NavBar must have a Mouse Off state. You can create NavBars with any combination of the other states.

NavBars with just the Mouse Off state use simple HTML code. This makes it easy to use on your web page, especially if you are an Internet novice. Using the other states requires you to copy the HTML and some JavaScript to the web page. This is not difficult (you do not need to understand JavaScript and these help pages contain full details of what to copy).


Justification

If you select Each button's text controls its width on the Size page (on the Button Strip), the width of each button depends on the amount of text it shows. For a vertical NavBar you can arrange the buttons so they are aligned on the left edges, around their centers, or on the right edges. Select the option you want from the menu on the NavBar page (on the Button Strip.) Technical note: for center and right-aligned, this uses HSPACE attributes in the IMG tags to space the buttons.

The Justify buttons list is dimmed for horizontal NavBars.


Spacing

Lets you have the NavBar buttons touching (spacing=0) or spaced apart (spacing=1 or greater). Technical note: this adds a VSPACE or HSPACE attribute to the IMG tag.


Button text list

Each line of text creates a separate button.

You can use this list to create or delete buttons and reorder the buttons.


NavBars & colors

The list on the Color page shows all the colors used in the NavBar. Selecting a NavBar state may add extra colors to the list. These are colors used only in that state - these colors are shown as, for example, Text (Mouse Over). You only see the effect of changing this color when viewing the Mouse Over NavBar state. See Viewing NavBar states.

Related topics:

NavBars


NavBars - Alt option
Adding Alternative button text

Browsers shows Alternative text when either

you move the mouse over the button

or you have told the browser not to display graphics.

To add Alternative text:

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click on the name of the button you want to add Alternative text to. This selects that button.

3.	Type the text you want to display into Alternative Button Text. You can have only a single line of text.

Technical notes:

Alternative text appears in an ALT attribute in the HTML IMG tag.

The same Alternative text applies to all button states.

Related topics:

NavBars


Create NavBars

Lets you convert a single button into a multibutton NavBar.

Note that a single button can have more than one line of text - NavBar buttons each have one line of text.


NavBars - adding URLs
Adding a URL (web address) & target

You can specify the URL (address) the browser jumps to when the viewer clicks on a button in a NavBar. You can also specify which frame (the Target) to open the new page in.

To add an address:

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click the button name you want to add the URL to. This highlights it.

2.	Type the address into Button URL.. Make sure you type the address correctly as Webstyle cannot check the address is valid.

If you have multistate (rollover) buttons in your NavBar: this address applies to all states. This is a limitation of HTML.

Browsers such as Netscape Navigator and Internet Explorer interpret web addresses as:

If the address starts http:// then it refers to a web site (for example "http://www.xara.com").

Other addresses are taken as relative to the current page. For example, index.htm is a page on the current web site.

You can also use addresses such as mailto:sales@xara.com to send email.

Webstyle automatically adds the http:// to:

addresses that start www. (such as www.buyfonts.com)

addresses that have two or more groups of characters separated by dots (such as news.bbc.co.uk)

For other web site addresses (such as xara.com), you need to add http:// to the start of the address. Otherwise the browser interprets it as relative (an address on the current web site). Please note that this is a function of the browser and beyond the control of Webstyle.

Specifying a Target:

If you want the web address to display in a specific frame in the browser, you can specify the "target" frame.

For example, if you type 'http://xara.com' into the URL field and 'RIGHT' into the Frame field, then this tells the browser to display the page 'http://xara.com' in the frame called 'RIGHT'.

The drop-down list contains four frame names that cause the browser to do special things:

_self	Fetch the specified web page into this frame. (The frame that contains this object.) This is the best option to use if you are not sure which to use.

_parent	Fetch the specified web page into the parent window or frameset that contains this frame.

_top	Fetch the web page into the main browser window, replacing any existing frames.

_blank	Fetch the web page into a new window.

none	Do not include a TARGET attribute in the image map entry for this object. This has the same effect as _self unless you have used a BASE TARGET= tag in the HTML document.

You can either select one of these, or type in the name of another frame.

Related topics:

NavBars


NavBars - including/excluding NavBar states
Including and excluding NavBar states

You can create multistate buttons in a NavBar. This page covers using NavBar states.

To include or exclude a state in the NavBar:

1.	Go to the NavBars page (on the Button Strip).

2.	In the NavBar States list, click on the check box to the left of the state name. Checked boxes show which states will be included when you save the NavBar.

Notes:

If the NavBar uses only the Mouse Off state, then you have a single block of HTML code to copy into your web page. If you include other states, you have to copy the HTML code and a block of JavaScript into your web page. More details of what to copy.

You should always include the Mouse Off state as this is the default state.

To view the state (without changing the include/exclude setting), click on the name of the state (Mouse Off, Mouse Over, Selected).

Related topics:

NavBars


NavBars can have multistate (rollover) buttons. There are three possible states:

Mouse Over - highlights an unselected button when the mouse is over it.

Selected (pressed in) - shows that the button is selected.

Mouse Off (pressed out) - when neither of the other states apply.

The NavBar must have a Mouse Off state. You can create NavBars with any combination of the other states.

NavBars with just the Mouse Off state use simple HTML code. This makes it easy to use on your web page, especially if you are an Internet novice. Using the other states requires you to copy the HTML and some JavaScript to the web page. This is not difficult (you do not need to understand JavaScript and these help pages contain full details of what to copy).


NavBars - states overview
Button states options

When creating a NavBar:you have four options about which states to include:

1. Include only the Mouse Off state

(Mouse off is the default state - all NavBars must include this state.)

Advantages:

Each button creates one graphic so you get the fastest download.

This is the easiest option to use if you are an Internet novice. You only need to copy a block of HTML code into your web page.

Disadvantage:

When viewed on a web page, the buttons always look the same - you cannot tell which is the selected button.

2. Include Mouse Off and Mouse Over states

Advantages:

When viewed on a web page, the Mouse Over state gives feedback that you can click this button.

Webstyle creates a common block of HTML and of JavaScript, which you can copy to every page that uses this NavBar.

Disadvantages:

You need to copy a block of JavaScript as well as the HTML. (This does not apply if you are using Microsoft FrontPage.)

When viewed on a web page, you cannot tell which is the selected button.

When viewed on a web page, clicking on the selected button takes you to the page you are already viewing. (You can disable this if you understand HTML.)

3. Include all the states or

4. Include Mouse Off and Selected states

Advantages:

When viewed on a web page, you can identify the selected button.

Disadvantages:

This is the most complex option. Webstyle creates one HTML page for each button. You may need to copy the HTML and JavaScript from the correct page into each of your web pages.

This creates the most graphics, either two or three graphics for each button. This increases download times.

Related topics:

NavBars

Using NavBars on your web pages


NavBars - topics
Tell me more about...

This page covers what you can do when on the NavBars page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what are NavBars?

creating a NavBar

creating a new NavBar button

deleting a NavBar button

reordering buttons

the NavBar states

viewing the states

including or excluding states

adding a URL (web address) and Target

adding Alternative button text

previewing before saving

using the NavBar on your web page

which browsers support multistate buttons

NavBar troubleshooter

spacing the buttons

aligning the buttons

colors and NavBars

tutorial on NavBars

options on this page

the Revert button

selecting the NavBar page from the keyboard

general information on Webstyle

Click a button to find out more.


NavBars - using NavBar 1a
Using the page created by Webstyle

This describes a simple NavBar with just the Mouse Off state and how you use the page created by Webstyle as a new web page for your web site. For other options click here.

Saving the NavBar creates a web page, one graphic for each button and (where appropriate) graphics for the decorative end caps.

To edit the page you can use a simple text editor or a web editing package such as Microsoft FrontPage or Macromedia Dreamweaver.

When the page is complete, you have to copy it and the associated graphics to your web server. The names of the graphics start with the same name as the web page created by Webstyle. We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the HTML SRC attributes to point to the correct folder.

Related topics:

NavBars


NavBars - using NavBar 1b
Using the page created by Webstyle

This describes a simple NavBar with  Mouse Off and Mouse Over states and how you use the page created by Webstyle as a new web page for your web site. For other options click here.

Saving the NavBar creates a web page, one graphic for each button and (where appropriate) graphics for the decorative end caps.

To edit the page you can use a simple text editor or a web editing package such as Microsoft FrontPage or Macromedia Dreamweaver.

When the page is complete, you have to copy it and the associated graphics to your web server. The names of the graphics start with the same name as the web page created by Webstyle. We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the HTML SRC attributes to point to the correct folder.

Related topics:

NavBars


NavBars - using NavBar 1c
Using the pages created by Webstyle

This describes a NavBar with either:

Mouse Off and Selected states

or all three states

and how you use the pages created by Webstyle as new web pages for your web site. For other options click here.

Saving the NavBar creates

one web page for each button (see Note),

one graphic for each state of each button (so each button in a three-state NavBar has two or three graphics)

and (where appropriate) two graphics for the decorative end caps.

Notes:

Each page has one button shown in the Selected state. The first page has button 1 selected. The second page has button 2 selected and so on. If you chose name as the file name when saving the NavBar, the first page is called name.html, the second page name2.html and so on.

To edit the pages you can use a simple text editor or a web editing package such as Microsoft FrontPage or Macromedia Dreamweaver.

When the pages are complete, you have to copy them and associated graphics to your web server. The names of the graphics start with the same name as the first web page created by Webstyle (name in the above example). We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the HTML SRC attributes to point to the correct folder.

Related topics:

NavBars


NavBars - using NavBar 2a
Using a NavBar on an existing web page

This describes a simple NavBar with just the Mouse Off state to an existing web page using either Microsoft FrontPage or Macromedia Dreamweaver. For other options click here.

Saving the NavBar creates a dummy web page, one graphic for each button and (where appropriate) graphics for the decorative end caps. The names of the graphics start with the same name as the dummy web page.

We recommend copying the dummy web page and graphics to the same folder as your existing web page is in. If you do not, you will need to copy over the graphics.

To copy the NavBar into your web page:

1.	In FrontPage or Dreamweaver, open the dummy web page created by Webstyle. This page has the name you selected when saving the NavBar (and in the same folder as you saved to).

2.	In FrontPage or Dreamweaver, open your web page.

3.	In the dummy web page, select the NavBar. (An easy way is Select All on the Edit menu.)

4.	Use Copy on the Edit menu to copy the NavBar.

5.	In your web page, Paste (on the Edit menu) the NavBar where you want it to appear.

If the NavBar is used on several web pages, repeat steps 2 and 5 for the other web pages.

Please note that we cannot offer Technical Support on using FrontPage or Dreamweaver.

Related topics:

NavBars


NavBars - using NavBar 2b
Using a NavBar with Dreamweaver or FrontPage

This describes adding a NavBar with Mouse Off and Mouse Over states into existing web pages using either Microsoft FrontPage or Macromedia Dreamweaver. For other options click here.

Saving the NavBar creates

a dummy web page,

one graphic for each state of each button (so a four-button NavBar has eight graphics),

and (where appropriate) two graphics for the decorative end caps. The names of the graphics start with the same name as the dummy web page.

We recommend copying the dummy web page and graphics to the same folder as your existing web page is in. If you do not, you will need to copy over the graphics.

To copy the NavBar into your web page:

This section applies to both FrontPage and Dreamweaver

1.	In FrontPage or Dreamweaver, open the dummy web page created by Webstyle. This page has the name you selected when saving the NavBar (and in the same folder as you saved to).

2.	In FrontPage or Dreamweaver, open your web page.

3.	In the dummy web page, select everything. (An easy way is Select All on the Edit menu.)

4.	Use Copy on the Edit menu to copy the NavBar.

5.	In your web page, Paste (on the Edit menu) the NavBar where you want it to appear.

If the NavBar is used on several web pages, repeat steps 2 and 5 for the other web pages.

This section applies to Dreamweaver only:

You need to copy the block of JavaScript into your web page. You need to know how to copy and paste text - you do not need to know JavaScript.

6.	In the dummy web page display the HTML source. (HTML Source in Dreamweaver 3 or Code Inspector in Dreamweaver 4, both on the Window menu.)

7.	Select and copy the block of text that starts:

<!-- Navbar def -->

and ends

<!-- Navbar def end -->

(There is a second block that starts <!-- Start of NavBar definition --> - do not copy this.)

8.	In your web page display the HTML source.

9.	Paste the block of text into the web page immediately before the </head> tag.

If the NavBar is used on several web pages, repeat steps 8 & 9 for the other web pages.

Please note that we cannot offer Technical Support on using FrontPage or Dreamweaver.

Related topics:

NavBars


NavBars - using NavBar 2c
Using a a multistate NavBar on an existing page

This describes adding a NavBar with either:

Mouse Off and Selected states

or all three states

into existing new web pages using either Microsoft FrontPage or Macromedia Dreamweaver. For other options click here.

Saving the NavBar creates

one dummy web page for each button (see Note),

one graphic for each state of each button (so each button three-state NavBar has two or three graphics)

and (where appropriate) two graphics for the decorative end caps.

We recommend copying the dummy web page and graphics to the same folder as your existing web page is in. If you do not, you will need to copy over the graphics.

Notes:

Each page has one button shown in the Selected state. The first page has button 1 selected. The second page has button 2 selected and so on. If you chose name as the file name when saving the NavBar, the first page is called name.html, the second page name2.html and so on.

To copy the NavBar into your web page:

1.	In FrontPage or Dreamweaver, open the dummy web page created by Webstyle. This page has the name you entered when saving the NavBar (and in the same folder as you saved to).

2.	In FrontPage or Dreamweaver, open your web page.

3.	In the dummy web page, select everything. (An easy way is Select All on the Edit menu.)

4.	Use Copy on the Edit menu to copy the NavBar.

5.	In your web page, Paste (on the Edit menu) the NavBar where you want it to appear.

Repeat these steps for name2.html and the second web page.

Dreamweaver only:

You need to copy the block of JavaScript into your web page. You need to know how to copy and paste text - you do not need to know JavaScript.

1.	In the dummy web page, display the HTML source. (HTML Source in Dreamweaver 3 or Code Inspector in Dreamweaver 4, both on the Window menu.)

2.	Select and copy the block of text that starts:

<!-- Navbar def -->

and ends

<!-- Navbar def end -->

(There is a second block that starts <!-- Start of NavBar definition --> - do not copy this.)

3.	In your web page, display the HTML source.

4.	Paste the block of text into the web page immediately before the </head> tag.

Repeat these steps for name2.html and the second web page.

Please note that we cannot offer Technical Support on using FrontPage or Dreamweaver.

Related topics:

NavBars


NavBars - using NavBar 3a
Using a NavBar on an existing web page

This describes adding a simple NavBar with just the Mouse Off state to an existing web page and using a text editor. For other options click here.

You need to know how to edit a web page and have a basic knowledge of HTML.

Saving the NavBar creates a dummy web page, one graphic for each button and (where appropriate) graphics for the decorative end caps.

First step is to copy the HTML code for the NavBar into your web page:

1.	If you have not already done so, save the NavBar. All the graphics and dummy web page are in the folder you select when saving. (The Export folder by default.)

2.	In a text editor open the dummy web page created by Webstyle. This page has the name you selected when saving the NavBar (and in the same folder as you saved to).

3.	In a text editor open your web page.

4.	Copy the block of  HTML code for the NavBar into your web page. The block starts

<!-- Start of NavBar definition -->

and ends

<!-- End of NavBar definition -->

Copy the entire block including these two lines.

If the NavBar is used on several web pages, repeat steps 2 and 3 for the other web pages.

Second, copy the web page and associated graphics to your web server. The names of the graphics start with the same name as the dummy web page. We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

Related topics:

NavBars


NavBars - using NavBar 3b
Using a NavBar on existing web pages

This describes adding a  NavBar with  Mouse Off and Mouse Over states to existing web pages and using a text editor. For other options click here.

You need to know how to edit a web page and have a basic knowledge of HTML.(You do not need to know JavaScript.)

Saving the NavBar creates

a dummy web page,

one graphic for each state of each button (so a four-button NavBar has eight graphics),

and (where appropriate) two graphics for the decorative end caps.

First step is to copy the JavaScript and HTML into your web pages.

1.	If you have not already done so, save the NavBar. All the graphics and dummy web page are in the folder you select when saving. (The Export folder by default.)

2.	In a text editor open the dummy web page created by Webstyle. This page has the name you selected when saving the NavBar.

3.	In a text editor open your web page.

4.	 Copy the block of JavaScript into your web page. The block starts:

<!-- Navbar def -->

and ends

<!-- Navbar def end -->

Copy this entire block into the HEAD section of your web page. A convenient place is just before the </head> tag. If your web page already contains some JavaScript, just insert this new script after the existing </script> tag. You can have more than one JavaScript block on the same HTML page.

5.	Copy the block of  HTML code for the NavBar into your web page. The block starts

<!-- Start of NavBar definition -->

and ends

<!-- End of NavBar definition -->

Copy the entire block including these two lines.

Second, copy the web page and associated graphics to your web server. The names of the graphics start with the same name as the dummy web page. We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

Related topics:

NavBars


NavBars - using NavBar 3c
Using a multistate NavBar on an existing web page

This describes a NavBar with either:

Mouse Off and Selected states

or all three states

into existing new web pages using a text editor. For other options click here.

To include the NavBar on a web page requires copying some HTML code and JavaScript to the web page. This description assumes you know how to edit a web page and have a basic knowledge of HTML.(You do not need to know JavaScript.)

Saving the NavBar creates

one dummy web page for each button (see Note),

one graphic for each state of each button (so each button three-state NavBar has two or three graphics)

and (where appropriate) two graphics for the decorative end caps.

Notes:

Each page has one button shown in the Selected state. The first page has button 1 selected. The second page has button 2 selected and so on. If you chose name as the file name when saving the NavBar, the first page is called name.html, the second page name2.html and so on.

First step is to copy the JavaScript and HTML into your web pages.

1.	If you have not already done so, save the NavBar. All the graphics and dummy web pages are in the folder you select when saving. (The Export folder by default.)

2.	In a text editor open the first page created by Webstyle. (name.html in the example above.)

3.	In a text editor open your web page which has button 1 selected.

4.	 Copy the block of JavaScript into your web page. The block starts:

<!-- Navbar def -->

and ends

<!-- Navbar def end -->

Copy this entire block into the HEAD section of your web page. A convenient place is just before the </head> tag. If your web page already contains some JavaScript, just insert this new script after the existing </script> tag. You can have more than one JavaScript block on the same HTML page.

5.	Copy the block of  HTML code for the NavBar into your web page. The block starts

<!-- Start of NavBar definition -->

and ends

<!-- End of NavBar definition -->

Copy the entire block including these two lines.

Repeat these steps for name2.html and the second web page. Similarly copy the HTML and JavaScript for the other pages/buttons.

Second, copy the web pages and associated graphics to your web server. The names of the graphics start with the same name as the dummy web page (name in the example above). We recommend copying the graphics into the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

Related topics:

NavBars


Button URL (web address)

When the viewer clicks a button in a NavBar this usually jumps to a different page or web site. This field lets you specify the page or web site to jump to. We suggest reading Adding URLs before adding URLs to your buttons.


Which browsers support multistate buttons?

Older browsers do not support (display correctly) the JavaScript for NavBar buttons These versions of popular browsers support JavaScript:

Internet Explorer 4.0 and later

Netscape Navigator 3.0 and later

Opera 3.5 and later

There are many other types of browser available. We have no information on JavaScript compatibility for these.


NavBars are sets of buttons arranged horizontally or vertically. Usually they appear at the top or side of web pages to aid navigation. Using Webstyle templates makes creating a NavBar a simple operation. And some button templates even have decorative end pieces for that finishing touch.

When you save a NavBar, Webstyle also creates the HTML code needed to display it. You can then use the code on your web page.

You can also create multistate buttons. These are a special type of button used on web pages. They change appearance (state) if you select them, click them, or if the mouse is over them (if the browser is JavaScript-enabled). This is controlled by a section of JavaScript on the web page. Webstyle creates this JavaScript when you save the NavBar. The good news is that you don't need to understand JavaScript - all you just copy the section of JavaScript into your web page.


NavBars options

This page describes the options on the NavBars page.

What are NavBars?

Button states?

Create NavBars

NavBar states

Spacing

Justify buttons

Button URL

Button text list

Related topics:

NavBars


NavBars troubleshooter

This troubleshooter covers common problems with NavBars:

The NavBar does not appear in the browser

The browser cannot find the JavaScript (.js) file. Make sure you uploaded the .js file to the same folder as the GIF or JPEG files.

Some or all of the graphics are missing

The NavBar looks like this:

The reason is that the browser cannot find the GIF or JPEG files for the button graphics. Remember to upload the graphics when you upload the web page to your server.

The NavBar doesn't appear in FrontPage or Dreamweaver

You see nothing (FrontPage 2000), [image] (FrontPage 97) or [image] (Dreamweaver). This is normal behavior for FrontPage and Dreamweaver and not a problem. Use the Preview tab (FrontPage 2000) or Preview in browser (FrontPage 97 or Dreamweaver) to view the graphics.


Navigate
Finding your way around

This page tells you how to navigate from page to page. If you are familiar with Windows Help files, finding your way around should be easy.

If you are a novice, read on...

Some text is green and underlined like this. Clicking on the underlined text takes you to another page. (Try clicking on this text.)

Some text is green and has a dotted underline like this. Clicking on the underlined text pops-up a small box with more information. (Try clicking on this text.)

Some text is blue like this [image]. Clicking on the blue text (or the [image]) takes you to a page on the Internet. (You must have an Internet connection for this to work.) You may have to log onto your Service Provider (ISP) before the link can be made - this depends on your Internet connection.

The Tell me more pages have small buttons like the one on the left. Click the button for information about the topic.

You see only relevant topics. So, for example, if you are on the Text page, you see only  those topics related to changing the text. Change to a different page, click Tell me more and you see a different set of topics.


Options

As you select the different buttons, this shows you what changes you can make to the graphic. For example, if you click the Text button, available options include the fonts installed on your computer, and the text message.


Pixels
Pixels are dimensions used for graphics intended for on-screen display. On the PC there are theoretically 96 pixels to 1in (2.5cm.) The actual on-screen size depends on the size of your monitor and the size of your desktop.


Preview

This lets you preview your graphic as you select different options.


Previewing a NavBar

Before saving a NavBar to disk you can preview it in your browser. This lets you quickly check that the NavBar looks right and that the URLs (web addresses) are correct.

To preview a NavBar:

1.	Create the NavBar - more details.

2.	Go to the Save page (on the Button Strip.)

3.	Set the required Save options. (For more information on these options, click Tell me more on the Save page.)

4.	Click Browser preview. This creates a temporary web page and displays it in your regular browser.

5.	If necessary, make any changes and preview again. Or, if you are happy with the results, click Save graphic to save the web page and graphics to disk.

Related topics:

NavBars


Project - Match
The Match option

With this option selected: clicking Apply changes updates only identical items in the other graphics. For example, if the Representative has 12pt text which you change, only graphics which also have 12pt text change. Graphics with other text sizes do not change.

With this option unselected: Apply changes updates all graphics with the changes.

Exceptions are colors and size. Match is always ignored. This is because Webstyle cannot determine which color or size you want to change.

Related topics:

More information on changes

Updating a Project


These are folders containing Project graphics. A Project is a set of graphics that you decided are connected together. (For example, they may be all the graphics used on a particular website.) If you want to edit the graphic on the website, you can quickly find it in the Project folder.


The Selection option

Clicking this button displays a menu:

First is a list of Projects. Click on a Project name to add all its graphic to the Selected Graphics list (the list on the right).

Clear all - click this to clear the Selected Graphics list.

Related Topic:

What are Projects?


What gets updated:

This page details how possible changes to the Representative affect the other graphics. Remember only changes affect other graphics. Remember also that you can selectively save graphics after updating.

Bevel:

Exact match selected:

Any changes to Depth apply only to graphics with bevels of the same depth. (Not all graphics have bevels as part of their design.) If the depth is different, the bevel does not change.

For example, if you increase the Representative's bevel depth from 4 to 8, any other graphics with a bevel depth of 4 also change to a bevel of 8.

A graphic with bevel depth of 10 retains the same bevel depth (10). (Although other changes to the Representative may affect other parts of this graphic.)

Similarly, changes to the other options only affect graphics with identical settings for that option.

Exact match unselected:

The changes apply to all graphics with bevels. (Not all graphics have bevels; it depends on the design.)

Color:

Exact match has no effect.

Any changes apply only to identical colors; that is, same name and same color. For example suppose the Representative has Color1 which is red - you change Color1 to blue. A second graphic also has Color1, also red - this is identical and so changes to blue. A third graphic also has Color1 but this is green. The name is the same but the color is different - this doesn't change.

Shadow:

Exact match selected:

Any changes apply only to graphics with identical shadows.

Exact match unselected:

Changes apply to all graphics.

Size:

Exact match has no effect.

Any changes apply only to identical sized graphics created from the same original template graphic. Thus you can create a series of buttons all based on the same original graphic and then resize them. The size of any other graphic is unchanged.

Text:

Some graphics have two separate text blocks. Changes to one text block apply only to the same text block in other graphics.

Exact match selected:

Fonts: changes apply only to graphics that use the same font. Graphics using other fonts do not change.

Wording: only graphics with identical wording change. If the Representative has the wording Home, only those graphics that also read Home change.

Exact match unselected:

Changes apply to all graphics. (But see note above about text blocks.)

Texture:

Exact match selected:

Only graphics that use the same texture change.

Exact match unselected:

Changing the background texture changes all backgrounds. Changing other textures changes all textures except the background.


Tell me more about...

This page covers what you can do when on the Projects page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what are Projects?

adding graphics to a Project

updating a Project (Apply changes)

Match option

Selection option

deleting a Project

tutorial on using Projects

copying graphics between Projects

I clicked a preview and my graphic changed. How do I restore the previous graphic?

selecting the Project page from the keyboard

general information on Webstyle

Click a button to find out more.


Prompts

This area of the window gives you information about actions available to you. It's a useful way of learning more about Webstyle.


Recoloring backgrounds

You can recolor any of the backgrounds. Some backgrounds use a single color, others two or more colors.

Some backgrounds have a semitransparent white overlay to give a textured look. This overlay lightens any color you use to recolor the background.


Recoloring shadows

After applying a shadow to a graphic, you can change the shadow color.

1.	Apply a shadow to the graphic. For more information on this, click Tell me more... on the Shadows page.

2.	Go to the Color page (on the Button Strip.)

3.	One of the colors in the list is now Shadow. Click on this to select it.

4.	Change its color.


Reloading my work

Webstyle saves an Edit file of every graphic you create. If you want to make further edits you can reload the file.

You have two options - use the option you find easier:

Click Import (on the Button Strip of the opening screen.) This displays graphics in the folder you last saved to. (A default folder if you haven't yet saved anything.) This is a quick way of reloading recent work.

Click Load (on the Button Strip of the opening screen) - see Tip on Projects.

Tips:

You can also drag-and-drop GIFs & JPEGs created by Webstyle onto the Preview Window. Webstyle then searches for the original template file and, if found, displays it. This also works for Webstyle XWS, XGT, X3D, & WIX files.

Projects: the Edit file for every graphic you create gets added to the current project. More information on Projects.


Removing a bevel

3D headings

For 3D headings the bevel is the join between the face and sides of the heading.

To remove a bevel:

1.	Select None from the Bevel type drop-down list.

Other types of graphic:

To remove a bevel:

1.	Set Depth to 0. This makes the bevel zero width and so cannot be seen.


Renaming a Project

Projects let you group related graphics together. An example is all the graphics used on a particular web site. Then if you want to change any of the graphics in the future, you can quickly find it in the Project folder.

All graphics belong to a Project; you select which Project when you save the graphic.

To rename a Project:

1.	Click Start on the Button strip.

2.	Click Load on the Button strip - this displays all your Projects.

3.	Right-click on the Project you want to rename. This opens a menu.

4.	Click Rename folder.

5.	Type in the new name. Press Enter to rename the Project folder. Press Esc if you want to keep the existing name.

Related Topic:

What are Projects?


Reordering NavBar buttons

You can change the order of the buttons on a NavBar.

To reorder a button:

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click below the button name you want to move. This highlights it.

3.	Drag the button name up or down the list of buttons.

Related topics:

NavBars


Clicking Revert discards any changes you made since clicking this button on the button strip.

Swapping to another button on the button strip saves any changes.

Keyboard short cut: CTRL+Z


Clicking Revert redisplays the graphic shown when you clicked this button on the button strip. This is useful if you are viewing multistate NavBar buttons and want to return to the original graphic.

Keyboard short cut: CTRL+Z


Right-click menu

Right-clicking on the Preview Window pops-up a menu. This lets you:

Copy the bitmap to the clipboard (see Copying using the clipboard)

Copy the filename to the clipboard (see Copying using the clipboard)

Make a Style (see What is a Style?)

Discard all changes and redisplay the last saved version of the graphic (on graphics you have created) or the original template graphic (on templates).

Right-clicking on graphic previews or folders pops-up a different menu. This lets you:

(On a folder) Explore - display the folder contents using Windows Explorer.

(On a folder) Open - display the folder contents using the regular folder viewer.

(On a folder) Delete the folder.

Delete the graphic you clicked on. Not shown if the graphic file is read-only (for example on the CD.)

Discard all changes and redisplay the last saved version of the graphic. Identical to Revert on the Preview Window pop-up menu.

(On a template graphic) Select this graphic as a Style - more details.

(On a saved graphic) Rename the graphic filename.

(On a folder) Rename the folder.


Rotating & Resizing Textures

For best results, the Background texture (used behind the graphic) should be identical that used on your web pages. For this reason, you cannot rotate or scale the background texture in Webstyle.

You can rotate or scale (resize) textures used on graphics.

To rotate a texture:

Click or drag the arrow on the Texture Angle wheel.

To scale a texture:

Change the value in Texture Scale.


Save - Advanced options
Advanced Saving options

Not available for animated banners.

These options give you greater control over saving graphics. You will find them useful if you understand GIF, JPEG, and PNG formats. Note that the current settings of these options also apply to the Simple saving options. This lets you select suitable options on this page and then use the Simple options to save your graphics - a great time saver.

Project

What are Projects?

Adding graphics to a Project

GIF options

You may need to experiment with different settings to get the best compromise between small file size and image quality. (Smaller files download quicker over the Internet.) Only you can decide which combination gives the best results for a particular graphic.

Dithering

Transparent

Interlaced

Number of colors

Trim transparency (displayed only when Transparent selected)

JPEG options

Quality

PNG options

Dithering

Transparent

Interlaced

Number of colors

Color depth

Trim transparency (displayed only when Transparent selected)

Related topics:

Saving a graphic

Bitmap formats

File Size options


Save - Advanced/dithering
Dithering - controls the display of colors that are not in the palette. None displays the nearest color in the palette. This can produce "banding" where two colors blend together. The advantage is that this option produces the smallest file size. Diffused gives best results where there are subtle color changes.


Save - Advanced/interlace
Interlaced - controls how the graphic appears as it downloads.

With this option selected, initially a low quality image appears. The quality improves as more of the graphic downloads.

With this option unselected, nothing appears until the complete graphic has downloaded.

Interlacing is useful for large graphics because the viewer can see the image as it downloads. The drawback is that files are slightly bigger. The minimum size for an interlaced graphic is 8x8 pixels.


Save - Advanced/quality
Quality - JPEG format compresses files by discarding unnecessary information. Quality controls how much information is discarded. Low quality discards most information and so produces the smallest file sizes. However the quality loss may be noticeable and you may need to use a higher setting. Our advice for the best results is use the lowest quality setting that gives acceptable results.


Transparent - controls the background behind a graphic. With this option selected, the background is transparent and you can see the web page background. With this option unselected, the background is the same as that shown in the preview window in Webstyle.


Save - Bitmap formats
Bitmap formats

There are two main formats used on web pages: GIF and JPEG. All browsers should display these formats. What advantages (and disadvantages) do the formats have?

GIFs are best for graphics produced by an illustration package such as Webstyle unless the graphic uses complex color graduations and shading. GIF is particularly suitable for simple graphics with only a few colors.

With GIFs you have the option of saving only the area covered by the graphic. Other areas are transparent and you can see the page background. (These are called Transparent GIFs.) This is useful if the graphic is an irregular shape and your web page has a patterned background. It helps the graphic blend better into the page background. Transparency-enabled is the regular option in Webstyle; to change the setting use the advanced options.

JPEGs are best for photographs and graphics with complex color graduations. The JPEG format uses 16 million colors (GIFs have a maximum of 256 colors) and so graphics with a lot of colors look better in high color (more than 256 colors) screen modes.

JPEGs always have a solid rectangular background (unlike transparent GIFs.) If your web page has a colored or patterned background, you need to use the same color or pattern in Webstyle. With some patterns you might see the join between the graphic and the rest of the page. How do I give the background a color or texture?

However these are only recommendations - you may like to try both formats to find which is best for your graphic.

PNG is relatively new format and not supported as standard by older browsers. However future browsers are likely to support it. PNGs are often used to transfer graphics between programs.

Note:

Animated banners use animated GIF format. They cannot use JPEG or PNG as these formats do not support animations.

Related topics:

Saving a graphic

File Size options

Advanced saving options


Save - Browser Preview
Browser Preview

The preview in Webstyle lets you view suitable save options for your graphic. But you can, as a final check, also preview the graphic in your regular browser. Click Browser Preview to load the browser (if not already loaded) and then display the graphic along with information on download times.

Previewing PNGs: some older browsers do not support PNG format and so cannot preview PNGs. Internet Explorer 4 and later versions of Netscape Navigator 4 can display PNGs (but ignore transparency.)


Trim transparency - this is useful for advanced users who require greater control over the boundary between a graphic (especially those with shadows) and the transparent background. With the slider to the right, the graphic is untrimmed. For some combinations of graphic and background, this can give a noticeable edge between the graphic and the page background. Moving the slider to the left trims the edge closer to the graphic.

Show trimmed - when selected, a checkerboard pattern shows the transparent parts of the graphic. This is a useful check on the shape of the transparent area.


Color depth - controls the maximum number of colors displayed in the graphic. The more colors used, the larger the file size. Often you get acceptable results using 4 bits-per-pixel (bpp) Color Depth - this depends on the graphic. For best results we suggest experimenting.

For 4 bpp and 8 bpp Color Depths you can use the slider for greater control of the number of colors.

Technical notes:

4 bpp Color Depth permits 16 colors. 8 bpp - 256 colors. 24 bpp - millions of colors. 32 bpp - has the same range of colors as 24 bpp but also includes 256 graduations of transparency (alpha-channel support.)

32 bpp permits graduated transparency; 4 bpp & 8 bpp have simple on-off transparency. 32 bpp is a useful way of saving Webstyle graphics for use in other packages.

(4 bpp & 8 bpp) Transparency, if used, counts as an extra color. Thus, a 256-color PNG contains 255 true colors plus transparency.


Number of colors - dimmed for 24 bits-per-pixel (bpp) and 32 bpp Color Depth. This slider controls the number of colors displayed in the graphic. The more colors used, the larger the file size.

For 4 bpp Color Depth you can use the slider to select between 2 and 16 colors. For 8 bpp Color Depth you can select 16-256 colors

Technical notes:

Transparency, if used, counts as an extra color. Thus, a 256-color PNG contains 255 true colors plus transparency.


Number of colors - controls the number of colors displayed in the graphic. The more colors used, the larger the file size. Often you get acceptable results using 32 or fewer colors - this depends on the graphic. For best results we suggest experimenting.

Technical notes:

Graphics are stored as either 16-color format (2-16 colors) or 256-color format (17 or more colors). A 16-color GIF is much smaller than a 17-color GIF.

Transparency, if used, counts as a color. Thus, if the text box shows 4 colors, a transparent GIF contains 3 true colors plus transparency.


Transparent - controls the background behind a graphic. With this option selected, the background is transparent and you can see the web page background. With this option unselected, the background is the same as that shown in the preview window in Webstyle. 24 bits-per-pixel (bpp) Color Depth format does not support a transparent background. 32 bpp Color Depth format always has a transparent background.


You can set a background color by clicking the Color button.

You can set a background texture by clicking the Texture button.


Safe characters:

A-Z a-z 0-9 are safe to use. However some (not all) web servers are case sensitive - they see ABC and abc as two different file names. Be consistent in your naming convention - it can save you possible problems later on.

- (dash/hyphen) and _ (underscore) are safe for punctuating file names.

These are not safe:

spaces, commas, periods, / \ (slash). (Windows allows spaces in file names but some web browsers do not.)


Save - best results
Getting the best results

You can select different settings for file size. Selecting Fast download gives you the smallest file sizes. For web graphics, small files download quicker. Use the preview to check that the quality is acceptable to you. (For animated banners: reducing the number of colors reduces the file size. Choose the smallest number of colors that give acceptable results.)

Create your graphic against the same color background or texture as used on your web page. This ensures your graphic blends perfectly into the page. (You don't need an exact color match - a close color still gives excellent results.) How do I give the background a color or texture?


The current folder is the folder you last saved a file to. The first time you save a file, Webstyle uses a default folder called Export. You can find Export in the folder where you installed Webstyle.


Save - dithering banners pu
Dithering - controls the display of colors that are not in the palette. None displays the nearest color in the palette. This can produce "banding" where two colors blend together. The advantage is that this option produces the smallest file size. Diffused "dithers" between two colors to give the impression of the missing color.


You probably created your graphic against the wrong color background. For best results, the background (or background texture) used in Webstyle should be roughly the same as used on your web page.

You can set a background color by clicking the Color button.

You can set a background texture by clicking the Texture button.


Save - preview
Preview before save

This page does not apply to animated banners - to preview these click Browser Preview.

The preview you see is the actual bitmap that will be saved to disk using the current settings. This makes it easy for you to check that the quality is correct. (Only you can decide when you have the right compromise between quality and file size/download time.)

File Size is a useful check on the file size. It updates automatically as you change settings.

Technical note: you see the actual JPEG, PNG, or GIF bitmap in the Save preview. For other options (Text, Color, etc.) you see a high-quality (24-bit, dithered down) preview which makes editing easier.


Save - topics
Tell me more about...

This page covers what you can do when on the Save page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

saving a graphic

previewing before saving

getting the best results

what folder are my files saved in?

using graphics on a web page

Output Type options (GIF/JPEG)

the File Size options

Projects

the Advanced options

Browser Preview

the Revert button

why is there a noticeable edge around my saved graphic?

I want to create a transparent GIF - what use are backgrounds?

copying using the clipboard

I clicked this button by mistake. What do I do?

selecting the Save page from the keyboard

general information on Webstyle

Click a button to find out more.


Save - which folder?
Which folder are my files saved in?

If you don't change the folder, Webstyle uses a default folder called Export. You can find Export in the folder where you installed Webstyle.

Related Topics:

How do I save to a different folder?

Saving a graphic


Save Project
The Project list

This lets you specify which Project to add this graphic to.

Related Topics:

What are Projects?

Adding graphics to a Project

Creating a new Project


Click another button to exit the Save page. The graphic gets saved to disk only when you click Save Graphic and then Save.


Save paths PU
Webstyle saves NavBar paths as relative addresses - that is, where the graphic is relative to the HTML file, not exactly where it is on the disk. This makes it easier to move the HTML and graphics files around within your web site. The disadvantage  is that you must keep the files in the same relative locations. If you move the folder containing the HTML file, you must also move the folder containing the graphics and the JavaScript file. Note that some web hosting companies require the graphics and HTML files to be in the same folder.


Saving a graphic

Animated banners have different options. See Saving banners for details.

1.	Select the type of graphic you want to create (GIF, JPEG or PNG.) Tell me more about these formats (See Note.)

2. 	Select the required file size. Tell me more about these options.

The preview shows the actual GIF/JPEG/PNG bitmap (using the settings you selected) that will be saved to disk. This makes it easy to check that the settings are correct.

3. 	Click Save Graphic to open the Output dialog box.

Output dialog box

4.	Type in a suitable name for your graphic. Suggestions on characters to avoid in web file names.

5.	To save the graphic to the current folder click Save.

To save to a different folder browse to that folder.

Information about using Webstyle graphics on your web pages.

You can now continue editing the graphic if required.

Notes:

To check how your graphic looks when viewed in a browser, click Browser Preview in Step 3. If you like the results you can then click Save Graphic and continue saving the graphic.

For greater control over saving, click Advanced. More information on the Advanced options.

Save work in project lets you specify which project this graphic belongs to. More information on Projects.


Saving banners
Saving animated banners

This page covers saving animated banners - see this page for saving other types of graphics.

GIF is the only format that supports animation. You cannot select other formats.

1.	Select the Dithering type - details. We recommend using None for animated banners.

2. 	Select the number of colors. The fewer colors used, the smaller the file size. You may need to experiment to get the best compromise between file size and number of colors.

3. 	Click Save Graphic to open the Output dialog box.

Output dialog box

4.	Type in a suitable name for your graphic. Suggestions on characters to avoid in web file names.

5.	To save the graphic to the current folder click Save.

To save to a different folder browse to that folder.

This saves the graphic to disk.

You can now continue editing the graphic if required.

Notes:

To check how your graphic looks when viewed in a browser, click Browser Preview in Step 3. If you like the results you can then click Save Graphic and continue saving the graphic.

Banners are stored as either 16-color format (2-16 colors) or 256-color format (17 or more colors). A 16-color banner is much smaller than a 17-color banner.

Project lets you specify which project this graphic belongs to. More information on Projects.


Saving to a different folder

If you don't specify a folder to save to, Webstyle uses the same folder as you last used. (Or a default folder if you have never specified a folder.)

To save to a different folder:

1.	Select the save options you want. (See Saving a graphic for more details.)

2.	Click Save Graphic - this displays more options.

3.	Browse to the folder you want to use by clicking Up or clicking a folder (if any).

4.	Type in a file name as normal. (See Saving a graphic for more details.)

5.	Click Save.


Selecting graphics

You can select the graphics in two ways:

Selecting all the graphics in a Project. To do this click Selection, then choose from the Projects listed. You can choose multiple projects to change.

If you don't want to update all the selected graphics:

Deselect individual graphics by right-clicking them in the Selected Graphics list; this displays a menu. Choose Unselect.

Alternatively include all the graphics in a Project and, after making the changes, save only those graphics you want updated.

Selecting individual graphics by clicking them in the left-hand list. This adds them to the Selected Graphics list.

To clear the Selected Graphics list, click Selection then choose Clear All.

You can also display the Add Project/Clear All menu by right clicking on an unused area of the Selected Graphic list.


Selecting templates

This covers selecting one of Webstyle's templates ready for editing.. The process differs between Theme Sets and other types of templates.

Theme Sets - you see a sample graphic from each Theme Set. Clicking the sample displays all the graphics in that Set.

The View drop-down list lets you swap to viewing Project folders where you save the Edit files for graphics you create - more on Projects. Or you can view all categories (Project folders, Theme Sets and other graphic types) by selecting All.

Click Search to view other types of graphic (see below).

Other types - you can filter the templates using the options on the left (such as graphic type or complexity). You then see the graphics that match these filters. Page (at the top of this window) shows how many pages of graphics and which page you are viewing. Use the arrows to move between pages.

Click Explore similar to see graphics of a similar type or design to the selected graphic.


Set image folder

This is an option for advanced users.

 Some users like to save graphics to a different folder from the HTML pages. Click Set image folder to specify a different folder for the graphics and the JavaScript file. Note on file paths.


Setting graphic size
Setting the size of a graphic

Setting the size:

Before saving the graphic to disk specify the size you want it to be on the final web page. Graphics always scale in proportion; changing the width also changes the height (and vice versa.) This stops graphics appearing stretched or squashed.

Using the slider:

1.	Drag the top slider to resize the graphic. The maximum width is 1500 pixels.

Typing in values:

1.	Type a value (in pixels) into Width or Height. The maximum is 1500 pixels.

Note: for technical reasons Width & Height are dimmed for 3D Headings. They show you the approximate size as you drag. When you stop dragging, they display the true size.

Component Width Control:

Parts of some graphics (such as buttons with text on them) rescale as you change the text. We call these rescalable sections 'components'. You have the choice of automatically rescaling any components as you change the text or manually scaling.

The component size controls are dimmed for graphics without components.

Manual scaling:

1.	Drag the bottom slider. This selects Manually set all button widths.

Automatic scaling:

1. Select Each button's text controls its width.

The length of the text now controls the width.

For NavBars you have a third option Longest text controls all button widths. Select this option if you want all the buttons the same size.

Dividers & Logos:

You can either scale both the height and width of dividers by using the top slider. Or you can control only the width using the bottom slider. Dragging the bottom slider automatically selects Manual size.

Select Default size return to the original height/width proportions.


You cannot apply shadows to Backgrounds (because they cover the entire background of a browser window.) Also NavBar buttons cannot have shadows.


Shadow - Advanced options
Advanced Shadow options

Tell me more about...

the difference between a Wall Shadow and a Floor Shadow

creating a Wall Shadow

creating a Floor Shadow

what are pixels?

removing a shadow

Click a button to find out more.


Shadow - Style
The Style button

See What is a Style? for information on Styles.

Using Styles:

1.	On the Designs page, right-click on the graphic you want to use for the Style. This pops-up a menu.

2.	On that menu click Create Style.

3.	On the Shadow page click the Style button. This pops-up a menu.

4.	Select Shadow from the menu.

Related topic:

Tutorial on using Styles


Click one of the shadow options.


Shadow - best results
Getting the best results

Webstyle shadows are semitransparent. That means some of the background color shows through. For best results, set the background color or texture to be the same as will be used on your finished web page.

You can set a background color by clicking the Color button.

You can apply a background texture by clicking the Texture button.


Shadow - create blur
Create "halo" or "glow" effects

You can use shadows to create halos or glows effect around graphics.

1.	Click the Advanced button.

2.	Select Wall shadow.

3.	Set the X-Y offsets to 0. This positions the shadow directly behind the graphic.

4.	Set the Blur slider to near the top. This gives a large blurred shadow.

You can also create a colored halo - see Changing the color of a shadow.


Click the Advanced button. This displays further controls that let you create your own custom shadows.


Click the No Shadow option. (Or None in the Advanced options.)


Shadow - topics
Tell me more about...

This page covers what you can do when on the Shadow page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

applying a shadow

removing a shadow

creating my own shadows

changing the color of a shadow

creating "halo" or "glow" effects

getting the best results

the Advanced options

the Style button

the Revert button

I don't like the new shadow. How do I return to the previous shadow (if any)?

why is this button sometimes gray?

selecting the Shadow page from the keyboard

general information on Webstyle

Click a button to find out more.


Shadow - types
The difference between Wall Shadows and Floor Shadows

Wall Shadows

This is the shadow thrown by a object onto a vertical surface. An example of a Wall Shadow.

Floor Shadow

This is typical of the shadow thrown by a vertical object onto a sloping surface. You aren't limited to horizontal surfaces. By choosing suitable settings, you can give the illusion of almost any angle. An example of a Floor Shadow.


Sharing files
Sharing files with another user

Notes on the types of Webstyle files.

If you want to share a Webstyle file with another user, you want to give them the Edit file. To find this open the Project folder containing this file. Projects are in WSTemplates, which you can find in the same folder as the Webstyle program.

The Edit file is the XWS file. The XGT file is a preview file, used when browsing in the Designs page - we suggest also including the XGT file.


Size - Style button
The Style button

See What is a Style? for information on Styles.

Using Styles:

1.	On the Designs page (on the Button Strip), right-click on the graphic you want to use for the Style. This pops-up a menu.

2.	On that menu select Create Style.

3.	Return to the Size page (on the Button Strip.)

4.	Click the Style button. This pops-up a menu.

5.	From the menu choose Width or Height to change the size of the graphic.

Related topic:

Tutorial on using Styles


Size - topics
Tell me more about...

This page covers what you can do when on the Size page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

changing the size of a graphic

why two sliders?

creating a series of buttons all the same size

how do I create a series of headings all the same height?

the 100% button

the Style button

the Revert button

I don't like the new size. How do I return to the previous size?

selecting the Size page from the keyboard

general information on Webstyle

Click a button to find out more.


Size - two sliders
Why two sliders?

The top slider (and the text boxes) controls the width and height of the graphic.

The lower slider (and the menu) has two uses:

For dividers it lets you make the divider wider without changing the height (Manual size). To restore the original proportions of the divider select Default size.

It gives you control over the width of graphics that stretch as you type in more text. (We call these "stretchy" graphics.) This stretching can be either automatic (Each button's text controls its width or, for NavBars, Longest text controls all button widths) or manual using the slider (Manually set all button widths).


The 100% button

Make the graphic the same size as the original template graphic. This is particularly useful for banners, which are normally specific sizes (120x120 pix or 468x60 pix).


This button is at the bottom right of the window.


Suitable fonts
There are two types of font used on PCs:

TrueType, and

Type 1 (also called ATM or PostScript fonts.)

Webstyle uses TrueType fonts.


System Menu

Click the icon in the top-left of the Webstyle window to display this menu.

This is largely a standard Windows menu. Most options duplicate icons on the top-right corner of the window. (Minimize, maximize, and close.)

Default size: restores the window to the size that looks best on screen. For 800x600 (or smaller) displays this is the same as full screen (maximize.) For larger displays this sets the window size to 800x600 pixels.


Technical Support
We hope you don't have any problems with Webstyle but if you do, you will find a helpful list of FAQs on our web site on  www.xara.com/support/Webstyle [image] These support pages are available 24 hours and can provide immediate answers to all the most common questions.

If the answer isn't on these support pages, you can contact our support department directly using the form on those pages.

This product is Webstyle 2 - Technical Support need this information.


Text - Style button
The Style button

See What is a Style? for information on Styles.

Using Styles:

1.	On the Designs page (on the Button Strip), right-click on the graphic you want to use for the Style. This pops-up a menu.

2.	On that menu click Create Style.

3.	On this page click the Style button. This pops-up a menu.

4.	From the menu you can choose either:

the text from the Style

or the font of the Style.

Note: graphics based on backgrounds, bullets and dividers do not contain text and the pop-up menu is dimmed.

Related topic:

Tutorial on using Styles


Text - accented characters
Accented characters

(Also called the extended character set.)

To type in accented characters:

1.	Press and hold down the left-hand ALT key

2.	Type in 0 (zero) and then the number of the character you want. For example for ô (o circumflex) type in 0244. These numbers are standard for most programs.

3.	Release ALT.

Note:

Some fonts do not include all the accented characters. This is a characteristic of the font and beyond the control of Webstyle.

You can use this method to type in any character, for example the Yen symbol ¥ (character 0165.)

The leading zero is important. 0244 & 244 are two different characters.


You selected a graphic that doesn't have any text associated with it.


Text - topics
Tell me more about...

This page covers what you can do when on the Text page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

how can I change the text?

Text Size field

the Advanced options

the Style button

the Revert button

why do some fonts in the list show the name and others show a name then some symbols?

why is this button sometimes gray?

I don't like the new font or text. How do I discard these changes?

typing in accented characters

the Geotype font

installing the fonts supplied with Webstyle

what fonts can I use with Webstyle?

where can I get more fonts?

selecting the Text page from the keyboard

general information on Webstyle

Click a button to find out more.


Change the wording

Edit the wording shown in the Text box. As you type, the preview automatically shows the new text.

Press Enter to start a new line.

NavBars only: each line of text is a separate button. Enter moves onto the text for the next button.


Lets you nudge the text relative to the other items in the graphic.

Dimmed for text-only graphics such as some Headings.


Letter Space

Use this to alter the space between letters. Space is measured in 1/1000th of an em (the width of the letter 'M' in the current font and size) so you have precise control over spacing.


Line Space

This controls the space between lines of text. Spacing is a percentage of the text size so changing the size keeps the same relative distance between lines of text.

Has no effect for a single line of text.


Placement

Used mainly for buttons. Dimmed if the text position is fixed by the designer of the template.

Lets you move the text above, below, to the side, or over other items in the graphic (for example a button.)


Text block

If the graphic has two (or more) separate blocks of text, Text block has a list of the blocks. From the list select the block you want to edit. Any changes you make then apply only to that text block.


Change font

Just look down the list of font previews until you find one that's suitable. Then click the preview.

With a font name highlighted, you can move up and down the font list using the up/down arrows on the keyboard. This is useful if you want to see how your text looks in different fonts.


Text options

What do you want to do?

select the text block (only displayed if the graphic has more than one block of text)

change the wording

change the font

change the size

Advanced options

(Click the Advanced button)

Placement

Horizontal

Vertical

Aspect

Letter space

Line space


Size

Use this to change the text size. Size is the height of the font, measured in points - there are 72 points to the inch (2.5cm). The actual size of the characters depends on the font used. A 12pt character in one font may differ in actual size from a 12pt character in a different font. For example both these characters are 16pt but in different fonts:


There are two types of font: regular text fonts and symbols fonts. With regular fonts, showing the name displays what the font looks like. Symbol fonts don't include normal letters so we need to show the name in a regular font and then show some sample characters. Note that Webstyle relies on information contained in the font to decide on the font type. Some symbols fonts are marked internally as regular fonts - for these fonts you will see some characters but not the font name.


Texture - Style button
The Style button

See What is a Style? for information on Styles.

Using Styles:

1.	On the Designs page (on the Button Strip), right-click on the template you want to use for the Style. This pops-up a menu.

2.	On that menu click Create Style.

3.	On the Texture page (on the Button Strip) select the name of the texture you want to change.

4.	Click the Style button. This pops-up a menu.

Note: some templates do not have textures associated with them and the menu is dimmed.

5.	From the menu choose the texture you want to use.

Related topic:

Tutorial on using Styles


You selected a graphic that cannot use textures.


Texture - topics
Tell me more about...

This page covers what you can do when on the Texture page. For information about other tasks, click Tell me more when on the relevant page.

registering this copy of WebStyle

upgrading to Webstyle 3

what's new in Webstyle 3?

what are textures?

using textures

the list of textures (Some graphics show only "Background" in the list.)

Texture Types (Plain - Bitmap - Duotone)

the Plain texture option

the Original texture option

why is this button sometimes gray?

textures and colors

rotating and resizing textures

I want to create a transparent GIF - what use are backgrounds?

the Style button

the Revert button

I don't like the new texture. How do I return to the previous texture (if any)?

adding my own textures

selecting the texture page from the keyboard

general information on Webstyle

Click a button to find out more.


This lets you replace the texture with flat color. Use the Color page to change the color.


Texture Types
The Texture Type options:

Plain:

Use flat color instead of this texture. Automatically set if you click the Plain texture square.

Bitmap:

Use a colored bitmap in this area of the graphic or as a background. Automatically set if you  select a texture (other than Plain).

Duotone:

(dimmed for Background textures and 3D Headings)

Convert this bitmap texture to a duotone (2-color texture). You can then use the Color page to change the two colors.


(Foreground textures only.) This selects the original texture used by the designer of the template.


Textures & color
Textures and colors

Many graphics can use either a flat color or a texture to color them. Also you can use colors or textures as backgrounds to a graphic. Use the Texture page to swap between flat color and textures.

for colors go to the Color page and change the colors (as required)

for textures go to the Texture page. Select a texture name from the list and then click the thumbnail of the texture you want to use.

in Textures click Plain to use a flat color.

You can also change foreground textures to two-color duotones which you can then recolor. (3D Headings cannot use duotones.)

1.	Go to the Textures page (on the Button Strip.)

2.	From the list of textures in the graphic select the name of the texture you want to convert.

3.	Select Duotone. This displays the textures as duotones instead of full color.

4.	Go to the Color page (on the Button Strip.)

5.	The list of colors now includes two new colors called "Texture Color 1" & "Texture Color 2" (or similar names.)

6.	You can then change these colors as required.

To restore a duotone to full color:

1.	Go to the textures page (on the Button Strip.)

2.	From the list of textures in the graphic select the name of the texture you want to restore.

3.	Select Bitmap.


Theme Set - what are they?
A Theme Set is a collection of graphics that share a common design theme. A set might include bullets, buttons, headings, a divider and a logo all in the same style.


Uninstall
Uninstalling Webstyle

If you want to remove Webstyle from your computer:

1.	Click Start on the taskbar. This displays a menu.

2.	Select Programs then Xara Webstyle.

3.	Select Webstyle Uninstall.

4.	You can also delete the Installation Folder you chose when you installed Webstyle.

To uninstall the Webstyle fonts:

1.	Display the Windows Control Panel.

2.	Choose Fonts.

3.	Select the fonts you want to delete and delete them.


Updating a Project

Projects let you group related graphics together; for example all the graphics used on a web site. Then if you want to update these graphics in the future, you can modify just one of the graphics and use that to modify the other graphics. An example is changing the color of all the buttons used on a web site.

All graphics belong to a Project; you select which Project when you save the graphic.

Another page describes how to add graphics to a project.

To update a project:

1.	The Selected Graphics list needs to contain the graphics you want to change. Therefore the first step is Selecting graphics.

2.	Click on the graphic you want to edit. This is called the "Representative". It can be any of the graphics in the Project. This becomes the top item in the Selected Graphics list.

3.	Edit the Representative as required. (For example, by changing its color.)

4.	Click Apply changes. Changes made to the Representative are then made to the other graphics in the Selected Graphics list. You can specify which graphics to save. (Or, for speed, click Save All to save all the graphics in one operation.)

Notes:

The Representative is the top graphic in the Selected Graphics list. To make another graphic the Representative, click on it. This moves that graphic to the top of the list.

To remove a graphic from the Selected Graphics list, right-click on it. This pops-up a menu. Choose Unselect to remove the graphic. (This just removes the graphic from the list - it doesn't alter or delete the graphic.)

Graphics are updated with changes to the Representative. For example, changing the text color but not the background, changes the text color of the graphics but has no effect on the backgrounds. More information on changes

Match controls whether changes apply only to identical settings (Match selected) or all settings (Match unselected). For example, if you change the bevel depth from 4 to 8, you can apply the change only to graphics which currently have a bevel depth of 4 (Match selected) or all graphics with a bevel (Match unselected).

NavBar buttons: the Project contains the graphic for the Default state. You need to recreate the other states using the NavBars page. Just select the button, go to the NavBars page, select any required settings and click Export.

Related Topics:

What are Projects?

Adding graphics to a project


Using NavBars on a web page
Using a NavBar on your web page

There are four possible types of NavBar:

a.	include just the Mouse Off state

b.	include Mouse Off and Mouse Over states

c.	include Mouse Off and Selected states

d.	include all three states

This page describes the advantages and disadvantages of each option.

There are three ways to use a Webstyle NavBar on your web page:

using the pages created by Webstyle as the basis for your pages. This is easiest if you are just starting to create the pages. How you include the NavBar depends on the type of NavBar:

type a

type b

type c or d

using Macromedia Dreamweaver or Microsoft FrontPage to add a NavBar to an existing page:

type a

type b

type c or d

using a text editor to add a NavBar to an existing page:

type a

type b

type c or d

Related topics:

NavBars

Using other graphics on a web page


Using Webstyle overview
Using Webstyle

If you just want a brief overview of using Webstyle, read on...

1.	First step is selecting the type of graphic you want to create

a.	Click the Start button. This displays the basic types of graphic.

b.	Click on the type of graphic you want to create (see note on Theme Sets). This opens the Designs page and shows the range of template graphics.

c.	Use the Search Filters (on the left) or the Back/Forward arrows (top-right) to find an appropriate template graphic.

d.	Click the template to load it.

2.	Next step is altering the graphic to your specific requirements

You might change its color or bevel, apply a shadow, add text (if the graphic allows this.)

For example, to change its color:

a.	Click the Color button. This displays the Color Picker.

b.	Click one of the colors in the Color Picker.

3.	Last step is saving the graphic

a.	Click the Size button. This lets you specify the size you want the graphic to be.

b.	Click the Save button. This displays the save options.

c.	Select the type of file you want to create and the quality.

d.	Click Save graphic to display a Save dialog box.

e.	Specify where you want to save the graphic and click Save. That's it - you've created a graphic for your web page.

You can then repeat the process to create more graphics. If you want to create another graphic of the same type, skip step 1 (for example, when creating two identical buttons, one red, one green.)

Tips

Want more information? Click the Tell me more button at the top-right of the window.

Don't like a change you've made? Click the Revert button at the bottom of the window.

Theme Sets: These are sets of graphics designed around a common style. The Designs page shows one example from each Theme Set. Click the Example to see all the template graphics in the set.


Using a Style

Styles allow you to copy parts of a Webstyle graphic (for example, the colors) into a new graphic. Styles described.

To use a Style:

1.	In the regular way select the graphic you want to change. You can edit it if required (for example by changing the text.)

2.	On the Designs page (on the Button Strip) right-click on the example graphic you want to copy from. This pops-up a menu.

3.	Select Create Style from the menu.

Suppose you want to copy a color from the Style graphic:

4.	Go to the Color page (on the Button Strip.)

5.	From the list of colors, select the name of the color you want to change.

6.	Click the Style button. This pops-up a menu showing the colors in the Style graphic.

7.	From the menu select the color you want to use.

8.	If required you can make further edits to the graphic.

Notes:

You can use the Style to copy several options. For example, you can copy the size, colors, textures.

Using a graphic as a Style does not change that graphic.

You can use any Webstyle graphic as a Style.


Using graphics on a web page
Using Webstyle graphics on a web page

After creating a graphic in Webstyle, you want to use it on your web pages. This page covers regular graphics - another page describes using NavBar graphics.

Some web page creation programs let you import the graphic and work out the HTML code for you. For example, Macromedia Dreamweaver has an Insert image option.

For simple text editors you insert a line of HTML where you want the graphic to appear. When saving the graphic we suggest clicking Browser preview. This displays the graphic and the suggested HTML.

The HTML looks like this for a graphic called xyz:

<IMG SRC="xyz.gif" WIDTH=20 HEIGHT=25>

(assuming you saved in GIF format). WIDTH & HEIGHT depend on the size of the graphic.

Copy everything (including the < & > into your web page.

Finally, copy the web page and the graphic to your web server. We recommend copying the graphic into the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attribute to point to the correct folder.


Using textures

The designer of the original template graphic decided which areas are suitable for textures. To apply a texture to these areas just click a name in the list (for example Text or Background) and then choose a texture from the list.

Some templates have no suitable areas for applying textures. For these, you see only Background in the list.


Viewing NavBar states

Webstyle lets you create multistate (rollover) buttons in NavBars. You can preview the look of the different states. This page covers using NavBar states.

To preview a state:

Note that this lets you preview any of the states, even if they are not included in the finished NavBar.

1.	Go to the NavBars page (on the Button Strip).

2.	In the Buttons list, click on the name of the state (Mouse Off, Mouse Over, Selected).

Clicking the check box to the left includes or excludes the state and displays it.

Viewing the Mouse Off state lets you view other included states:

To view the Mouse Over state move the mouse over a NavBar button .

To view the Selected state click on a NavBar button.

Notes:

Some NavBar designs include decorative end caps. These are common to all states.

The button text is common to all states. You can edit the text when viewing any state but the changes then apply to all states.

Related topics:

NavBars


Web publishing
Webstyle lets you create the graphics (GIFs or JPEGs) for use on your web pages. It isn't a page creation package so it cannot create the text nor the finished web page for you.

Nor can Webstyle publish the graphics on the web for you (that is copy or 'upload' the graphics from your computer up onto the Internet). Web hosting companies have several different ways of publishing web pages and graphics and you should use the appropriate method for your particular hosting company.

This page describes using Webstyle graphics on a web page

This page describes using Webstyle NavBars on a web page.

Please note that we cannot offer advice on the page creation packages nor general advice on web publishing.


Webstyle files
Webstyle uses three types of file:

The original Template file.

A GIF, JPEG or PNG file for use on your website. You create this file when you Save the graphic.

An Edit file listing the changes you have made to the Template. Saving the graphic automatically creates an Edit file in the current Project folder.


What are Projects?

Projects let you group related graphics together. For example all the graphics for a particular web site.

If you want to change the graphics for that web site, display the Project for that site. You can then select and edit each of the graphics. (You can display Project folders by clicking Start [on the button strip] then selecting Load. This displays all the Project folders - initially there is only one Project folder, called Default.

You specify which Project to add a graphic to when you save the graphic. For more information, click Tell me more on the Save page.

Related Topics:

Creating a new Project

Renaming a Project

Deleting a Project


What are textures?

Webstyle has two types of textures - pictures of real life objects (leaves, walls, wood) and electronically generated random patterns.

Using textures instead of flat color can make your graphics more eye catching. You may find that using a texture creates a bigger file than using flat color. This can make the graphic slower to download over the Internet.


What is a Style?

Styles allow you to copy parts of a Webstyle template graphic (for example, the colors) into a new graphic. An example shows how to use them. You might want all your headings to use the same shade of blue. You can create an example heading with the required color. Then in the future when you want to create a new heading, just select the example as a Style, and then on the Color page select the blue color for use in the new heading. You can do this with all the options including colors, shadows, and size.

Related topics:

Step by step guide to using Style

Tutorial on using Styles


Whats new overview
What's new in version 3

Xara Webstyle 3 has many significant enhancements over Webstyle 2, including important new graphic types, new templates, better integration with HTML editors and greater flexibility to customize and export the templates to exactly meet your own requirements.

 Upgrading to Webstyle 3

 Download a trial version of Webstyle 3

You can now create cascading DHTML menus for your NavBars. Webstyle makes it easy to add menus and submenus to your NavBars and it automatically creates all the necessary HTML and JavaScript.

Seamless integration with Macromedia Dreamweaver and Microsoft FrontPage, making it extremely easy to incorporate Webstyle graphics within pages created in these two popular programs

Incorporating NavBars into existing web pages is easier

As part of the extended NavBar tool, the NavBar editing dialog has been completely redesigned to make it more intuitive and productive.

Support for photo processing, including the ability to enhance your own photos (changing contrast, brightness, blur, transparency etc ) as well as rescale, color, crop and rotate.

Creation of thumbnail images of photos including the automatic generation of the JavaScript needed to display the original photo by clicking on the thumbnail in a web page.

A large number of extra top quality, modern template designs (more complete themes comprising all the different graphic types, plus new animated banners and miscellaneous NavBars)

Greater control over the export of NavBars, allowing for separate destinations for HTML and graphics

An update button to do an automated check on the latest versions and themes so you can always be sure you have the most up to date versions available


Template not found

When Webstyle saves a graphic (GIF/JPEG/PNG file), it also creates a file (XWS format) which stores the edit details. Webstyle cannot edit the graphic but reloads the XWS file and edits that.

You got this error message because Webstyle cannot find the template file. This is because:

You loaded a file not created by Webstyle. You cannot edit this file.

The template file has been moved. Use the Windows Find option on the Start menu to find the template file. (For a graphic called graphic.gif, look for graphic.xws.)

You renamed the graphic. Search for the original filename.

You deleted the XWS file, possibly by deleting the Project file. The template does not exist and you cannot make edits.


Xara products
Other Xara products

Xara has a range of other products for web and general illustration work. For details of the current product range see  Xara product range

Xara X

A fully featured illustration package that lets you create original artwork. The perfect complement to Xara Webstyle when you need to create still and animated graphics from scratch and require more advanced print and illustration features. For full details see  Xara X web page

Xara3D

Webstyle includes a range of 3D headings created using Xara3D. With Xara3D you can create both still and animated 3D headings from scratch with advanced control over all aspects of the heading, including bevels, extrusion, color, light angles, textures and animation As well as regular text you can also extrude imported shapes. For full details see  Xara3D web page

BuyFonts.com

Webstyle includes a selection of fonts from the BuyFonts range of over 1000 fonts. With prices starting at $2, BuyFonts.com meets all your font needs. For full details see BuyFonts.com web site

Xara Online

Xara Online offer a range of online Web Services from animated photo and text effects to complete email, form and database management solutions. Add just a single line of HTML to your page, all the hard work is done on Xara Online's servers. For full details see Xara Online web site


Changing the aspect ratio makes the text wider (aspect ratio above 100%) or narrower (below 100%) than normal.


Instead of clicking on the button you can press F10 on the keyboard.


Instead of clicking on the button you can press F11 on the keyboard.


Instead of clicking on the button you can press F12 on the keyboard.


Instead of clicking on the button you can press F2 on the keyboard.


Instead of clicking on the button you can press F3 on the keyboard.


Instead of clicking on the button you can press F4 on the keyboard.


Instead of clicking on the button you can press F5 on the keyboard.


Instead of clicking on the button you can press F6 on the keyboard.


Instead of clicking on the button you can press F7 on the keyboard.


Instead of clicking on the button you can press F8 on the keyboard.


Instead of clicking on the button you can press F9 on the keyboard.


Webstyle creates:

two graphics for each button

if the Selected and Mouse Over states look the same or

the NavBar uses only Mouse Off and Selected states

three graphics for each button

if the Selected and Mouse Over states look different